React Date and Date Range Picker

2.0.1 · abandoned · verified Sun Apr 19

react-date-range is a React component library designed for selecting single dates or date ranges, offering a highly configurable and stateless approach to date management. As of version 2.0.1, it leverages `date-fns` for underlying date operations, requiring it as a peer dependency (minimum `date-fns` v2.0.0-alpha.1). It features multiple range selection, drag-and-drop capabilities, and keyboard navigation, using native JavaScript Date objects for all inputs and outputs. While previously actively maintained, the project's maintainers have stated it is currently unmaintained and will not be updated in the foreseeable future, making its release cadence effectively paused. Key differentiators include its flexibility, emphasis on native Date objects, and `date-fns` agnosticism (via peer dependency) over deprecated libraries like Moment.js.

Common errors

Warnings

Install

Imports

Quickstart

This quickstart demonstrates how to set up a `DateRangePicker` component with initial state using React hooks, handling selection changes, and importing the necessary styles. It displays two months horizontally and logs the selected date range to the console.

import React, { useState } from 'react';
import { DateRangePicker } from 'react-date-range';
import 'react-date-range/dist/styles.css'; // main style file
import 'react-date-range/dist/theme/default.css'; // theme css file

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

  const handleSelect = (ranges) => {
    setState([ranges.selection]);
    console.log('Selected range:', ranges.selection);
    // You would typically update your application state here
    // e.g., send ranges.selection.startDate and ranges.selection.endDate to a parent component or API
  };

  return (
    <div>
      <h2 style={{ marginBottom: '15px' }}>Select a Date Range</h2>
      <DateRangePicker
        ranges={state}
        onChange={handleSelect}
        showSelectionPreview={true}
        moveRangeOnFirstSelection={false}
        months={2} // Display two months
        direction="horizontal"
      />
    </div>
  );
}

// To use this component in a React app, you'd typically render it:
// import { createRoot } from 'react-dom/client';
// const container = document.getElementById('root');
// const root = createRoot(container);
// root.render(<MyDateRangePicker />);

view raw JSON →