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 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.
1 | 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.
1 | 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.
1 2 3 | 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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | function App() { const [startDate, setStartDate] = useState(null); const [endDate, setEndDate] = useState(null); const [focusedInput, setFocusedInput] = useState(null); return ( <div className="App"> <h5 className="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, endDate }) => { setStartDate(startDate); setEndDate(endDate); }} focusedInput={focusedInput} onFocusChange={e => setFocusedInput(e)} displayFormat="DD/MM/YYYY" /> <div className="mt-3 mb-1">Start Date: {startDate && startDate.format('ll')}</div> <div>End Date: {endDate && endDate.format('ll')}</div> </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.
So we have two different solutions for this issue.
Solution 1:
We can use the following style to add in the CSS file.
1 2 3 | .DateInput { position: static !important; } |
Solution 2:
In the second solution, we can use the bootstrap stylesheet link to fix this issue.
1 | <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.
That’s it for today.
Thank you for reading. Happy Coding..!!
