React Date Range Picker Component Using react-datepicker

The react-datepicker package that you can use to implement the date picker field in your react component, and you can also implement the date range picker field.

The date range picker field means your website will have two datepicker fields (start date and end date) that are dependent on each other. If you select the date for the start date field then obviously your end date should be greater than the start date and you can make a check for this condition.

So in this tutorial, we will focus on making the date range picker component in react application using the react-datepicker package.

So let’s get started.

Create React App

First of all, you must have react application installed on your machine then we will proceed further to install the react datepicker package and work with it.

To install the react application use the following command in your terminal. If you already have installed the react app then you can skip this step.

npm create-react-app react-app-name

See Also: How to Install React Application?

Install Datepicker Package

So after creating the react application, you have to install the react-datepicker package. To install the react-datepicker, use the following command.

npm install react-datepicker --save

OR

yarn add react-datepicker

After installing it now you can use it to make a date range picker field in your react app and customize it according to your requirements.

Make Date Range Picker Field

Now we will make a date range picker component and see the final output. So let’s import the react-datepicker package in your component. You can also make a separate component, it’s up to you how you want to configure it.

To import the react-datepicker, use the following code lines in your component file.

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

Now you use the <DatePicker /> component tag to show the datepicker field at the frontend. See the following code as a reference.

<DatePicker
	selected={this.state.startDate}
	selectsStart
	startDate={this.state.startDate}
	endDate={this.state.endDate}
	onChange={this.handleChangeStart}
/>

So this datepicker syntax you can use to make a date range field. To make the date range field you have to add the two <DatePicker /> components.

Then you can configure them accordingly using the different props for each other. It is up to you how you handle the states of start date and end date, but I will show you one example of it.

Date Range Examples

Let’s see some working examples of date range fields and see how it works. See the following code of the default date range picker field.

Default Date Range

const DateRange = () => {
    const [startDate, setStartDate] = useState(new Date());
    const [endDate, setEndDate] = useState(new Date());
    return (
        <>
            <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}
            />
        </>
    );
};

In this above code, first, we declare the two states for start date and end date and take default date as today’s date.

Then we used the <DatePicker /> components that having selected, onChange, sslectsStart, selectsEnd, startDate, endDate, and minDate as props.

There are more props that you can use to make more customizations in datepicker fields.

When you click on the date field it will show you the calendar to select the date, so you can select a start date and then select the end date.

You will notice it will not let you select the endDate smaller than the startDate. Because we made a check bypassing the minDate props as a start date value.

Date Range for One DatePicker

You can also make the date range field from one date picker field, you just have to optimize the code. So if you want to make a date range field from one datepicker field then use the following code.

const DateRange = () => {
    const [startDate, setStartDate] = useState(new Date());
    const [endDate, setEndDate] = useState(null);
    const onChange = (dates) => {
        const [start, end] = dates;
        setStartDate(start);
        setEndDate(end);
    };
    return (
        <DatePicker
            selected={startDate}
            onChange={onChange}
            startDate={startDate}
            endDate={endDate}
            selectsRange
        />
    );
};

Note: If you want to make a visible calendar field then use the inline props in <DatePicker /> field.

Date Range for One DatePicker with Disabled Dates Highlighted

If you want to exclude some days from selection of date range then you can make using the excludeDates and selectsDisabledDaysInRange props. See the code below for reference.

const DateRange = () => {
    const [startDate, setStartDate] = useState(new Date());
    const [endDate, setEndDate] = useState(null);
    const onChange = (dates) => {
        const [start, end] = dates;
        setStartDate(start);
        setEndDate(end);
    };
    return (
        <DatePicker
            selected={startDate}
            onChange={onChange}
            startDate={startDate}
            endDate={endDate}
            excludeDates={[addDays(new Date(), 1), addDays(new Date(), 5)]}
            selectsRange
            selectsDisabledDaysInRange
            inline
        />
    );
};

Date Range Using Input with Clear Button

Add a clear button with the input date range field to clear the dates. You have to use the isClearable props as true value.

const DateRange = () () => {
    const [dateRange, setDateRange] = useState([null, null]);
    const [startDate, endDate] = dateRange;
    return (
        <DatePicker
            selectsRange={true}
            startDate={startDate}
            endDate={endDate}
            onChange={(update) => {
                setDateRange(update);
            }}
            isClearable={true}
        />
    );
};

Date Range with Portal

If you want to show your date field calendar as a portal and pass the withPortal props in the field. So when click on the input field the calendar will be shown as a modal box.

const DateRange = () => {
    const [dateRange, setDateRange] = useState([null, null]);
    const [startDate, endDate] = dateRange;
    return (
        <DatePicker
            selectsRange={true}
            startDate={startDate}
            endDate={endDate}
            onChange={(update) => {
                setDateRange(update);
            }}
            withPortal
        />
    );
};

There are more customization available you can check on the official website of react-datepicker.

Conclusion

So in this tutorial, you learned about react-datepicker package, how to install and import this package in react component, and then make a date range picker field.

You also learned about date range field customization like date range from one datepicker, exclude dates, date range field with a clear button, and date range field as a portal.