react-date-range Documentation

Install the main package via npm. Note that react-date-range requires react and date-fns as peer dependencies, so you must ensure they are installed in your project.

npm install --save react-date-range

npm install --save react date-fns

Before using the components, you must import the main CSS file and a theme CSS file to ensure the date range components are styled correctly.

import 'react-date-range/dist/styles.css'; // main css file
import 'react-date-range/dist/theme/default.css'; // theme css file

To enable infinite scrolling, set the scroll prop to { enabled: true }. This feature is influenced by the direction and months props. You can also customize the dimensions of the calendar and months within the scroll object.

// shape of scroll prop
scroll: {
  enabled: PropTypes.bool,
  monthHeight: PropTypes.number,
  longMonthHeight: PropTypes.number, // some months has 1 more row than others
  monthWidth: PropTypes.number, // just used when direction="horizontal"
  calendarWidth: PropTypes.number, // defaults monthWidth * months
  calendarHeight: PropTypes.number, // defaults monthHeight * months
}),

The DateRangePicker component wraps DefinedRange and Calendar components together. It allows for selecting date ranges and supports multiple ranges, custom day content, and accessibility labels. It extends all props from its underlying components.

import { addDays } from 'date-fns';
import { useState } from 'react';
import { DateRangePicker } from 'react-date-range'; // Assuming standard import

const [state, setState] = useState([
  {
    startDate: new Date(),
    endDate: addDays(new Date(), 7),
    key: 'selection'
  }
]);

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

After installation and importing styles, you can import one of the four available standalone components depending on your needs:

• DateRange
• DateRangePicker
• Calendar
• DefinedRange

To ensure the calendar renders correctly, you must import the main skeleton styles and the default theme CSS files.

import 'react-date-range/dist/styles.css'; // main style file
import 'react-date-range/dist/theme/default.css'; // theme css file

Install the react-date-range package using npm:

npm install react-date-range

To support multiple independent date ranges, pass an array of range objects to the ranges prop. Each object in the array should include a unique key to identify the range in the onChange callback.

import { addDays } from 'date-fns';
import { useState } from 'react';

const [state, setState] = useState({
  selection1: {
    startDate: addDays(new Date(), 1),
    endDate: null,
    key: 'selection1'
  },
  selection2: {
    startDate: addDays(new Date(), 4),
    endDate: addDays(new Date(), 8),
    key: 'selection2'
  },
  selection3: {
    startDate: addDays(new Date(), 8),
    endDate: addDays(new Date(), 10),
    key: 'selection3',
    autoFocus: false
  }
});

<DateRangePicker
  onChange={item => setState({ ...state, ...item })}
  ranges={[state.selection1, state.selection2, state.selection3]}
/>;

The DefinedRange component can be used with its default range labels by providing a ranges prop containing an array of range objects and an onChange callback to update the state. A range object typically includes startDate, endDate, and a key.

import { useState } from 'react';

const [state, setState] = useState([
  {
    startDate: new Date(),
    endDate: null,
    key: 'selection'
  }
]);

<DefinedRange
  onChange={item => setState([item.selection])}
  ranges={state}
/>;

You can enable manual date entry by setting the editableDateInputs prop to true. This allows users to type dates directly into the input fields. Use the onChange callback to update your state with the new selection.

import {useState} from 'react'
const [state, setState] = useState([
    {
      startDate: new Date(),
      endDate: null,
      key: 'selection'
    }
  ]);
  
<DateRange
  editableDateInputs={true}
  onChange={item => setState([item.selection])}
  moveRangeOnFirstSelection={false}
  ranges={state}
/>