pa-react-date-range v3.3.2

Date Range Picker PA version

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

Notice ⚠️

This project is a fork of the original @iroomit/react-date-range by iroomit.

Added showWeekNumbers prop to show week numbers in the calendar.

Why should you use pa-react-date-range?

• 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

Getting Started

Installation

npm install pa-react-date-range

or

yarn add pa-react-date-range

then, styles and theme file must be imported:

import 'pa-react-date-range/dist/styles.css'; // main css file
import 'pa-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

Usage

You need to import skeleton and theme styles first.

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

DatePicker

import React from 'react';
import { Calendar } from 'pa-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)}/>
  )
}

DateRangePicker / DateRange

import React from 'react';
import { DateRangePicker } from 'pa-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]
      });
    }}/>
  );
}

Options

Type DateRange:

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

Type AriaLabelsType:

type AriaLabelsType = {
 dateInput?: {
   startDate?: string,
   endDate?: string
 },
 monthPicker?: string,
 yearPicker?: string,
 prevButton?: string,
 nextButton?: 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.

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

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 🙈