DOCSEARCHbyAlgolia
Submit Docs

React DayPicker

website·Indexed 35 days ago

https://daypicker.dev

A TypeScript React component for building accessible date pickers, calendars, and date inputs.

Tokens
425
Snippets
2
Records
4
Agent score
23%

What's inside React DayPicker

  1. Migrate non-Gregorian calendars to v10

    When upgrading to React DayPicker v10, non-Gregorian calendar support has moved from subpath imports of react-day-picker/* to dedicated add-on packages. Replace old imports with the corresponding package based on the calendar system needed.
    // Replace react-day-picker/persian with:
import { PersianCalendar } from '@daypicker/persian';

// Other available packages:
// @daypicker/hijri
// @daypicker/buddhist
// @daypicker/ethiopic
// @daypicker/hebrew

  2. Install and set up React DayPicker v10

    React DayPicker is a TypeScript React component used to build accessible date pickers, calendars, and date inputs. For new projects (v10), the component should be imported from the @daypicker/react package. To ensure the component renders correctly, the default stylesheet must be imported unless custom styles are provided.
    pm install @daypicker/react
    import { DayPicker } from '@daypicker/react';
import '@daypicker/react/style.css';

  3. Configure date selection modes

    React DayPicker supports several selection flows to handle different user requirements:

    • Single: Select one day using selected and onSelect props.
    • Multiple: Select multiple individual days with optional min/max constraints.
    • Range: Select a start and end date range.
    • Custom: Implement bespoke selection behavior outside the built-in modes.

  4. Implement localization and time zone support

    React DayPicker provides built-in support for internationalization and regional settings:

    • Locales: Use date-fns locales via @daypicker/react/locale.
    • Time Zones: Render and select dates using specific IANA time zones or UTC offsets.
    • Calendar Systems: Supports ISO 8601, Broadcast calendars, and specialized packages for Persian, Hijri, Buddhist, Ethiopic, and Hebrew calendars.