DEV Community

NasreenKhalid
NasreenKhalid

Posted on

React Date Range Picker

#react #daterange #beginners #javascript

Adding date range picker is an essential part of web applications when it comes to making a date selection or developing any kind of calendar component.
Today, we will try to explore the react 'react-date-range' package which is a handy react date library that allows us to choose date and date ranges.

Let's begin by installing the above mentioned package in our react app:

 npm install --save react-date-range
Enter fullscreen mode Exit fullscreen mode

Please note that the above package will expect the date-fns dependency in order to calculate days so we need to install the following also:

 npm install --save react date-fns
Enter fullscreen mode Exit fullscreen mode

After the necessary installations, create a separate component where you can add the date range code.

Following are the imports that will be required in our react-component:

 import React, { useState } from "react"; import { addDays } from "date-fns"; import 'react-date-range/dist/styles.css'; // main style file import 'react-date-range/dist/theme/default.css'; // theme css file import { DateRangePicker } from 'react-date-range';
Enter fullscreen mode Exit fullscreen mode

Now, we will use react useState hook to define the start_date, end_date and the key (selection of the dates)

 const [state, setState] = useState([ { startDate: new Date(), endDate: addDays(new Date(), 7), key: "selection", }, ]);
Enter fullscreen mode Exit fullscreen mode

Please note that we will use the addDays dependency to specify the start_date and end_date.
Now we can call DateRangePicker Component in the following manner:

 <DateRangePicker onChange={(item) => setState([item.selection])} showSelectionPreview={true} moveRangeOnFirstSelection={false} months={2} ranges={state} direction="horizontal" />
Enter fullscreen mode Exit fullscreen mode

This will show a nice daterange selection on our web page which is useful in multiple scenarios.
Complete code for this component is shown below:

 import React, { useState } from "react"; import { addDays } from "date-fns"; import 'react-date-range/dist/styles.css'; // main style file import 'react-date-range/dist/theme/default.css'; // theme css file import { DateRangePicker } from 'react-date-range'; const DateRange = () => { const [state, setState] = useState([ { startDate: new Date(), endDate: addDays(new Date(), 7), key: "selection", }, ]); return ( <div> <h1>Safe Travels Co</h1>  <h2>Book Your Flight below</h2>  <DateRangePicker onChange={(item) => setState([item.selection])} showSelectionPreview={true} moveRangeOnFirstSelection={false} months={2} ranges={state} direction="horizontal" /> ; </div>  ); }; export default DateRange;
Enter fullscreen mode Exit fullscreen mode

Image description

Hope you guys enjoy reading the above article.
Happy coding...

Top comments (0)