@types/react-date-range

What is @types/react-date-range?

@types/react-date-range provides TypeScript definitions for the react-date-range library, which is a React component for selecting date ranges. It helps developers use the library with TypeScript by providing type definitions for the various components and props.

What are @types/react-date-range's main functionalities?

Date Range Picker

The Date Range Picker allows users to select a range of dates. The code sample demonstrates how to import and use the DateRangePicker component, set an initial date range, and handle date selection changes.

import { DateRangePicker } from 'react-date-range';
import { addDays } from 'date-fns';

const selectionRange = {
  startDate: new Date(),
  endDate: addDays(new Date(), 7),
  key: 'selection'
};

<DateRangePicker
  ranges={[selectionRange]}
  onChange={handleSelect}
/>;

Single Date Picker

The Single Date Picker allows users to select a single date. The code sample shows how to import and use the Calendar component, set an initial date, and handle date selection changes.

import { Calendar } from 'react-date-range';

const handleSelect = (date) => {
  console.log(date);
};

<Calendar
  date={new Date()}
  onChange={handleSelect}
/>;

Defined Ranges

Defined Ranges allow users to quickly select predefined date ranges. The code sample demonstrates how to set up and use defined ranges with the DateRangePicker component.

import { DateRangePicker } from 'react-date-range';
import { addDays } from 'date-fns';

const definedRanges = [
  {
    label: 'Today',
    startDate: new Date(),
    endDate: new Date()
  },
  {
    label: 'Last 7 Days',
    startDate: addDays(new Date(), -7),
    endDate: new Date()
  }
];

<DateRangePicker
  ranges={definedRanges}
  onChange={handleSelect}
/>;

Other packages similar to @types/react-date-range

react-dates

react-dates is a library by Airbnb for date picking in React. It offers a highly customizable date range picker and single date picker. Compared to react-date-range, react-dates provides more customization options and better accessibility support.

react-datepicker

react-datepicker is a simple and customizable date picker component for React. It supports date range selection, single date selection, and time selection. While it is more lightweight than react-date-range, it may lack some of the advanced features and predefined ranges.

react-day-picker

react-day-picker is a flexible date picker component for React. It allows for single date selection, date range selection, and even custom date selection logic. It is highly customizable and can be styled to fit various design requirements, making it a versatile alternative to react-date-range.

README

Installation

npm install --save @types/react-date-range

Summary

This package contains type definitions for react-date-range (https://github.com/hypeserver/react-date-range).

Details

Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-date-range.

Additional Details

• Last updated: Tue, 05 Dec 2023 12:09:51 GMT
• Dependencies: @types/react, date-fns

Credits

These definitions were written by Junbong Lee, Minseok Choi, and John Demetriou.