React bootstrap datepicker example with getting selected date

React bootstrap is a component-based library that provides bootstrap features as react component, Today, We will learn how to integrate bootstrap datepicker in react applications, and I will also explain how to get the selected value of datepicker.

You can download the working example of a date picker component https://github.com/technostuf/react-bootstrap-datepicker-example

Create a React application
Install react-bootstrap library
Add code to the file
Run a React application

Create a React application

Create a React app using the below command.

 npx create-react-app react-bootstrap-datepicker-example

The above command will create a new folder with the app name so you need to move into that folder, use the below command to change the directory.

 cd react-bootstrap-datepicker-example

Install react-bootstrap library

After creating react app we need to install react-bootstrap and bootstrap from npm or yarn. the following command will install react-bootstrap and bootstrap package into the application.

 npm install --save react-bootstrap bootstrap
 OR using yarn
 yarn add react-bootstrap bootstrap

Add code to the file

Create a component file DatepickerComponent.js to hold the date picker code, then we need to import it into App.js

import React, { useState, useRef } from "react";
import "bootstrap/dist/css/bootstrap.css";
import { Form } from "react-bootstrap";

const DatepickerComponent = () => {
    const [selectedDate, setSelectedDate] = useState([]);

    let handleOnChange = (event) => {
        setSelectedDate(event.target.value);
    }
    return (
        <>
            <div>
                <div className="row">
                    <div className="col-md-4">
                        <Form.Group controlId="dob">
                            <Form.Label>Choose Date</Form.Label>
                            <Form.Control type="date" name="orderDate" onChange={handleOnChange} placeholder="Order Date" />
                        </Form.Group>
                        <br />
                        <h5>Selected Date: {selectedDate}</h5>
                    </div>
                </div>
            </div>
        </>
    )
}
export default DatepickerComponent;

React bootstrap datepicker – Get the selected date

We can get the selected date by using the onChange event, onChange event is called when the user selects the date from the date-picker, in the above example, we call the handleOnChange function on the onChange event, event.target.value returns the element value means the selected date and we set to state so we can access globally in page.

Finally, you have to import both files into App.js

import './App.css';
import DatepickerComponent from './DatepickerComponent';

function App() {
  return (
    <div className="App">
      <h1>React bootstrap datepicker - technostuf.com</h1>
      <DatepickerComponent />
    </div>
  );
}
export default App;

Run a React application

Run the React application using the following command.

 npm start

After compilation, the program opens your browser and runs http://localhost:3000/

Output

You can download the working example of a date picker component.

https://github.com/technostuf/react-bootstrap-datepicker-example