A date library agnostic React component for choosing dates and date ranges. Uses date-fns for date operations.

This awesome project is a fork of the original react-date-range by hypeserver.

This fork aims at keeping this project alive!

Dependencies have been upgraded, class components updated to function components and the entire project has been rewritten in TypeScript. Some of the code has also been optimized further with newer React features.

• Fully maintained as of 2024!
• Stateless date operations
• Highly configurable
• Multiple range selection
• Based on native js dates
• Drag n Drop selection
• Keyboard friendly
• Built-in TypeScript support

Live Demo : http://iroomitapp.github.io/react-date-range

@iroomit/react-date-range is also used in production on iROOMit Roommates & Rooms Finder website.

npm install @iroomit/react-date-range

or

yarn add @iroomit/react-date-range

then, styles and theme file must be imported:

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

This plugin expects react and date-fns as peerDependencies, It means that you need to install them in your project folder.

npm install react date-fns

or

yarn add react date-fns

You need to import skeleton and theme styles first.

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

import React from 'react';
import { Calendar } from '@iroomit/react-date-range';

function MyComponent() {

  const [date, setDate] = React.useState(new Date());

  return (
    // onChange returns native Date Object
    <Calendar date={date} onChange={date => setDate(date)}/>
  )
}

import React from 'react';
import { DateRangePicker } from '@iroomit/react-date-range';

function MyComponent() {

  const [range, setRange] = React.useState({
    startDate: new Date(),
    endDate: new Date(),
    key: 'selection' // used as key for range returned from onChange
  });

  return (
    <DateRangePicker ranges={[range]} onChange={(range) => {
      // range returned from onChange will have the structure
      // {
      //   selection: {
      //    startDate: [native Date Object],
      //    endDate: [native Date Object],
      //   }
      // }

      setRange({
        startDate: range.startDate,
        endDate: range.endDate,
        key: Object.keys(range)[0]
      });
    }}/>
  );
}

type DateRange = {
 startDate: Date,
 endDate: Date,
 color?: string,
 key?: string,
 autoFocus?: boolean,
 disabled?: boolean,
 showDateDisplay?: boolean,
 label?: string
}

type AriaLabelsType = {
 dateInput?: {
   startDate?: string,
   endDate?: string
 },
 monthPicker?: string,
 yearPicker?: string,
 prevButton?: string,
 nextButton?: string
}

To enable infinite scroll set scroll={{enabled: true}} basically. Infinite scroll feature is affected by direction(rendering direction for months) and months(for rendered months count) props directly. If you prefer, you can overwrite calendar sizes with calendarWidth/calendarHeight or each month's height/width with monthWidth/monthHeight/longMonthHeight at scroll prop.

type Scroll = {
  enabled?: boolean,
  monthHeight?: number,
  longMonthHeight?: number,
  monthWidth?: number,
  calendarWidth?: number,
  calendarHeight?: number
}

• Merge everything that needs to be in the release to master
• Open a new release PR than:
  • bumps version to appropriate one <new_version>
  • Update CHANGELOG.md
• Make sure the demo and important features are working as expected
• After merging, tag the master commit with release/<new_version> and let Github Action handle publishing
• = Profit 🙈

• Make mobile friendly (integrate tap and swipe actions)
• Add tests
• Improve documentation