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
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
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';
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",
},
]);
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"
/>
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;
Hope you guys enjoy reading the above article.
Happy coding...
Latest comments (0)