React Date Range Picker

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...