Date Range Picker in React

Today we’ll show you how to implement date range picker in React. Sometimes you need to implement DateRangePicker in booking sites, reporting sites and at many more places. So here we will demonstrate you the range picker in React.

In the previous article, we have explained about the Implementation of the DateTimePicker and datetime" title="Disabled the past and future dates">Disabled the past and future dates in React.

Steps to implement Date Range Picker

Create a react application
Install npm package for date range picker
Add date range picker code to component
Fix the issue of the arrow icon that hidden/covered
Output

1. Create a react application

Let’s create a react application to implement Date Range Picker using `create-react-app`. If you don’t know how to create a react app then refer to this link for more information.

Run the following code to create a react application.

npx create-react-app date-range-picker-react

2. Install npm package for date range picker

Here we are going to use the react-dates npm package for date range picker.

Run the following command to install the package.

npm i react-dates

3. Add date range picker code to component

To implement the date range picker, we have to add the below code at the top of the react component.

import 'react-dates/initialize';
import { DateRangePicker } from 'react-dates';
import 'react-dates/lib/css/_datepicker.css';

Now let’s add the following code to add a date range picker.

function App() {
  const [startDate, setStartDate] = useState(null);
  const [endDate, setEndDate] = useState(null);
  const [focusedInput, setFocusedInput] = useState(null);

  return (
    <div class="App">
      <h5 class="mb-3">Date Range Picker in React - <a href="https://www.cluemediator.com">Clue Mediator</a></h5>
      <daterangepicker startdate={startDate} startdateid="s_id" enddate={endDate} enddateid="e_id" ondateschange="{({" startdate,="" })=""> { setStartDate(startDate); setEndDate(endDate); }}
        focusedInput={focusedInput}
        onFocusChange={e => setFocusedInput(e)}
        displayFormat="DD/MM/YYYY"
      />
      <div class="mt-3 mb-1">Start Date: {startDate && startDate.format('ll')}</div>
      <div>End Date: {endDate && endDate.format('ll')}</div>
    </daterangepicker></div>
  );
}

In the above code, we have used the three different state variables such as `startDate`, `endDate` and `focusedInput`. The `startDate` and `endDate` is used to manage the selected date from the DateRangePicker and `focusedInput` is used to control the focus of the date input.

We have also used the `displayFormat` to change the format of the display date in date range picker inputs.

4. Fix the issue of the arrow icon that hidden/covered

While you are working with the date range picker at that time you might have noticed that the arrow icon is not visible. Check out the below image where the arrow icon is missing from the middle part of the range picker.

Arrow icon issue - Clue Mediator

So we have two different solutions for this issue.

Solution 1:

We can use the following style to add in the CSS file.

.DateInput {
  position: static !important;
}

Solution 2:

In the second solution, we can use the bootstrap stylesheet link to fix this issue.

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

In the current article, I have added the bootstrap link in the `public/index.html` file.

5. Output

Let’s run the project and check out in the browser.

Output - Date Range Picker in React - Clue Mediator

That’s it for today.
Thank you for reading. Happy Coding..!!

Demo & Source Code

Github Repository StackBlitz Project