@atefbena/react-date-range

A fork of the great react-date-range package

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

Why should you use @atefbena/react-date-range?

• Stateless date operations
• Highly configurable
• Multiple range selection
• Based on native js dates
• Drag n Drop selection
• Keyboard friendly

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

Getting Started

Installation

yarn add @atefbena/react-date-range

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

yarn add react date-fns

Usage

You need to import skeleton and theme styles first.

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

DatePicker

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

function MyComponent() {
  function handleSelect(date) {
    console.log(date); // native Date object
  }
  
  return (
    <Calendar
      date={new Date()}
      onChange={handleSelect}
    />
  );
}

DateRangePicker / DateRange

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

function MyComponent() {
  function handleSelect(ranges) {
    console.log(ranges);
    // {
    //   selection: {
    //     startDate: [native Date Object],
    //     endDate: [native Date Object],
    //     label: [string] // selected range label 
    //   }
    // }
  }
  
  
  const selectionRange = {
    startDate: new Date(),
    endDate: new Date(),
    key: 'selection',
  }
  
  return (
    <DateRangePicker
      ranges={[selectionRange]}
      onChange={handleSelect}
    />
  )
}

Options

*shape of range:

 {
   startDate: PropTypes.object,
   endDate: PropTypes.object,
   color: PropTypes.string,
   key: PropTypes.string,
   autoFocus: PropTypes.bool,
   disabled: PropTypes.bool,
   showDateDisplay: PropTypes.bool,
 }

**shape of ariaLabels:

 {
   // The key of dateInput should be same as key in range.
   dateInput: PropTypes.objectOf(
     PropTypes.shape({
       startDate: PropTypes.string,
       endDate: PropTypes.string
     })
   ),
   monthPicker: PropTypes.string,
   yearPicker: PropTypes.string,
   prevButton: PropTypes.string,
   nextButton: PropTypes.string,
 }

Infinite Scrolled Mode

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.

  // 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
  }),

Release workflow

• 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 🙈

TODOs

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