Home ยป React datepicker using the most popular react-datepicker library

React datepicker using the most popular react-datepicker library

In this tutorial, we will implement the datepicker in react application using the most popular react npm package react-datepicker. The react-datepicker is a simple and reusable component of react, used for displaying the datepicker in react application. This datepicker package allows for easy customization like allowing to select time, select date in range, disable datepicker, clear selected date, etc…, If you want to implement a react-bootstrap datepicker read this article here

You can download/clone the working example: https://github.com/technostuf/react-date-picker-example

Create a React application

Create a React app using the below command.

 create-react-app react-date-picker-example

The above command will create a new folder with the app named react-toastify-example, so you need to move into that folder, and use the below command to change the directory.

 cd react-date-picker-example

Install react-datepicker library

After creating react app we need to install react-datepicker from npm or yarn.

 npm i react-datepicker --save

Basic Datepicker Example

Let’s implement a basic datepicker with minimal settings, Create a new file DatepickerComponent.js which holds the datepicker code, and Add the below code in that file.

import React, { useState } from "react";
import DatePicker from 'react-datepicker';

import "react-datepicker/dist/react-datepicker.css";

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

    let handleOnChange = (date) => {
        setSelectedDate(date);
    }

    return (
        <div className="container">
            <div className="row register-form ">
                <h1>React datepicker example - technostuf.com</h1>
                <div className="col-md-6" >
                    <div className="form-group">
                        <DatePicker
                            selected={selectedDate}
                            onChange={handleOnChange}
                            name="startDate"
                            dateFormat="MM-dd-yyyy"
                        />
                    </div>
                </div >
            </div >
        </div>
    )
}
export default DatepickerComponent;

Finally, you have to import DatepickerComponent into App.js.

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

function App() {
  return (
    <div className="App">
      <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

react datepicker

Useful props

  1. isClearable: Clear the selected date
  2. selected: Set the selected date in datepicker, Default selected date can be using this property
  3. dateFormat: Set the date format like dd-mm-yyyy
  4. closeOnScroll: Accept the boolean value, the default value is false. Datepicker will close on a scroll the page, You can also callback function on scroll, See Example here
  5. className: Add the custom HTML class
  6. dayClassName: Add the class to the day’s box in datepicker
  7. timeClassName: Add the class to the time box in datepicker
  8. disabled: Disabled the datepicker, Not allowed to select

Date Range picker Example

We can select the date range by doubling the date picker component, it allows us to select the date range

import React, { useState } from "react";
import DatePicker from 'react-datepicker';
import "react-datepicker/dist/react-datepicker.css";

const DatepickerRangeComponent = () => {
    const [startDate, setStartDate] = useState(new Date());
    const [endDate, setEndDate] = useState(new Date().setDate(new Date().getDate() + 7));

    return (
        <div className="container">
            <div className="row register-form ">
                <h1>React range datepicker example - technostuf.com</h1>
                <div className="col-md-6" >
                    <div className="form-group">
                        <DatePicker
                            selected={startDate}
                            onChange={(date) => setStartDate(date)}
                            selectsStart
                            startDate={startDate}
                            endDate={endDate}
                        />
                        <DatePicker
                            selected={endDate}
                            onChange={(date) => setEndDate(date)}
                            selectsEnd
                            startDate={startDate}
                            endDate={endDate}
                            minDate={startDate}
                        />
                    </div>
                </div >
            </div >
        </div>
    )
}
export default DatepickerRangeComponent;

Output

react datepicker

Time picker Example

The time picker allows selecting the time from the time list

import React, { useState } from "react";
import DatePicker from 'react-datepicker';

import "react-datepicker/dist/react-datepicker.css";

const DatepickerTimepickerComponent = () => {
    const [startDate, setSelectedDate] = useState(new Date());
    let handleOnChange = (date) => {
        setSelectedDate(date);
    }
    return (
        <div className="container">
            <div className="row register-form ">
                <h1>React range datepicker example - technostuf.com</h1>
                <div className="col-md-6" >
                    <div className="form-group">
                        <DatePicker
                            selected={startDate}
                            onChange={handleOnChange}
                            showTimeSelect
                            timeFormat="HH:mm"
                            timeIntervals={20}
                            timeCaption="time"
                            dateFormat="MMMM d, yyyy h:mm aa"
                        />
                    </div>
                </div >
            </div >
        </div>
    )
}
export default DatepickerTimepickerComponent;

Output

react datepicker with timepicker

Datepicker Events

react-datepicker supports the following events

  1. onSelect: Triggered when selecting the date
  2. onBlur: Triggered when focus removed from input box
  3. onFocus: Triggers when focus entered in the input box
  4. onMonthChange: Triggered when the month change
  5. onChange: Triggered when input box value changes by selecting the date
  6. onCalendarClose: Triggered when calendar closed
  7. onCalendarOpen: Triggerdd when calender open

You can download/clone the working example

https://github.com/technostuf/react-date-picker-example

Related Post

2 thoughts on “React datepicker using the most popular react-datepicker library”

  1. I’m not sure where you’re getting your information, but great topic.
    I needs to spend some time learning more or understanding more.
    Thanks for excellent info I was looking for this information for my mission.

Leave a Comment

Your email address will not be published.

three × 2 =