React DayPicker

DayPicker is composed of several functional UI elements. When styling or interacting with the calendar, you can identify days using specific modifiers:

• selected: The day is selected.
• disabled: The day is disabled.
• hidden: The day is hidden.
• focused: The day has focus.
• today: The day is today.
• outside: The day is outside the current month.
• range_start: The day is the start of a selected range.
• range_middle: The day is inside a selected range.
• range_end: The day is the end of a selected range.

All stylable UI elements are mapped to CSS classes. For a complete list of these classes, refer to the UI enum in the API documentation.

DayPicker provides several advanced capabilities for building date interfaces:

• Customization: Extensive props for calendar appearance and customizable components to extend rendered elements.
• Styling: Minimal design that can be styled with CSS or any CSS framework.
• Selection Modes: Supports single days, multiple days, ranges of days, or custom selections.
• Localization: Supports various languages, time zones, and multiple calendar systems including ISO 8601, Persian, Hijri, Buddhist (Thai), Ethiopic, and Hebrew.
• Accessibility: Complies with WCAG 2.1 AA requirements.
• Integration: Easy integration with standard HTML input fields.

DayPicker is split into a core React package and several calendar-specific packages.

• Use @daypicker/react for the core React component, props, hooks, utilities, and shared types.
• Use a specific calendar package if you need a non-Gregorian calendar, including its specific DayPicker component, locale constants, and date-library helpers:
  • @daypicker/buddhist: Buddhist/Thai calendar.
  • @daypicker/ethiopic: Ethiopic calendar.
  • @daypicker/hebrew: Hebrew calendar.
  • @daypicker/hijri: Hijri (Umm al-Qura) calendar.
  • @daypicker/persian: Persian (Jalali) calendar.

DayPicker provides a highly customizable and accessible calendar component with the following features:

• Customization: Extensive props for calendar customization and customizable components to extend rendered elements.
• Styling: Minimal design easily styled with CSS or any CSS framework.
• Selection Modes: Supports single days, multiple days, ranges of days, or custom selections.
• Localization & Time Zones: Supports localization into any language and various time zones.
• Calendar Systems: Supports ISO 8601 and broadcast calendars. Specialized calendars (Persian, Hijri, Buddhist (Thai), Ethiopic, and Hebrew) are available via @daypicker/* add-on packages.
• Accessibility: Complies with WCAG 2.1 AA requirements.
• Integration: Easy integration with input fields.

To use the Buddhist calendar with React DayPicker, you must install both the core @daypicker/react package and the @daypicker/buddhist addon.

npm install @daypicker/react @daypicker/buddhist

If built-in selection modes do not meet your requirements, you can implement custom logic using the onDayClick and modifiers props.

To implement custom selection:

1. Disable built-in logic: Omit the mode prop (or set it to undefined).
2. Manage state: Maintain your own selection state in your component.
3. Sync styling/ARIA: Derive a selected modifier (and any range_* modifiers) from your state and pass them to the modifiers prop so the UI and accessibility features remain aligned.
4. Handle accessibility:
   • Ignore clicks/interactions on modifiers.disabled or modifiers.hidden.
   • For keyboard support, implement the same logic in onDayKeyDown (handling Space and Enter keys) as you do in onDayClick.

Import DayPicker from @daypicker/ethiopic instead of the standard @daypicker/react package. This provides Ethiopic months, weekdays, and numerals while maintaining the standard DayPicker API. By default, the locale is set to amET with Ge'ez numerals.

import { DayPicker } from "@daypicker/ethiopic";

<DayPicker />

Generate static content for the DayPicker website. The output will be placed in the build directory and can be hosted on any static content hosting service.

$ npm build