React Bootstrap Datepicker Example

In this tutorial, you will learn how to create datepicker component in react js app using bootstrap library.

How to Create and Use Bootstrap DatePicker in React JS

Steps to implement bootstrap date-picker in react js apps:

• Step 1 – Create React App
• Step 2 – Install Bootstrap
• Step 3 – Create Bootstrap DatePicker Component
• Step 4 – Add Bootstrap DatePicker Component in App.js

Step 1 – Create React App

Run the following command on your terminal to create a new react app:

npx create-react-app my-react-app

To run the React app, run the following command on your terminal:

npm start

Check out your React app on this URL: localhost:3000

Step 2 – Install React Bootstrap

Run the following command to install and setup bootstrap library into your react app:

npm install bootstrap --save

npm install react-bootstrap bootstrap

Add bootstrap.min.css file in src/App.js file:

import React, { Component } from 'react'
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
function App() {
  return (
    <div>
      <h2>How to Create Bootstrap DatePicker in React</h2>
    </div>
  );
}
export default App;

Step 3 – Create Bootstrap DatePicker Component

Create BootstrapDatePickerComponent.js file in src directory, and implement a datepicker in this component file:

import React from 'react'
import { Form } from 'react-bootstrap';
class BootstrapDatePickerComponent extends React.Component{
    render(){
        return(
            <div>
                <div className="row">
                    <div className="col-md-4">
                        <Form.Group controlId="dob">
                            <Form.Label>Select Date</Form.Label>
                            <Form.Control type="date" name="dob" placeholder="Date of Birth" />
                        </Form.Group>
                    </div>
                </div>
            </div>
        )
    }

}
export default BootstrapDatePickerComponent;

Step 4 – Add Bootstrap DatePicker Component in App.js

In this step, you need to add BootstrapDatePickerComponent.js file in src/App.js file:

import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import BootstrapDatePickerComponent from './BootstrapDatePickerComponent'
function App() {

  return (
    <div className="App">
      <BootstrapDatePickerComponent />
    </div>
  );
}
export default App;

Conclusion

In this tutorial, you learned how to setup Bootstrap in a React JS app to create a datepicker on a component.

Recommended React JS Posts