gpbl/react-day-picker
React Day Picker
react-day-picker is a customizable calendar interface for React web applications. It provides a user interface for selecting single days, multiple dates, or date ranges while complying with WCAG 2.1 AA standards for assistive technology compatibility.
The component supports internationalized date input, adapting formats and languages to match regional requirements. It further extends this global support by providing a multi-calendar date selector that functions with non-Gregorian systems, including Persian, Hijri, Buddhist, Ethiopic, and Hebrew calendars.
The library covers interactive date selection with support for selection constraints and time selection integration. Users can apply visual customization to the layout and navigation controls, including the use of custom highlighting to distinguish specific dates such as holidays or events.
Features
- Date Selection Components - Provides an interactive calendar interface for selecting single days, multiple dates, or date ranges.
- Calendars And Dates - Implements a date selector that functions across both Gregorian and non-Gregorian calendar systems.
- Date Pickers - Provides a customizable React-based calendar interface for flexible date and range selection.
- Web Accessibility Compliance - Ensures the calendar conforms to WCAG 2.1 AA standards for users relying on assistive technologies.
- Accessibility Implementations - Implements accessible date picking interfaces that comply with WCAG standards for assistive technology.
- Calendar Components - Offers a specialized user interface component for selecting dates and managing calendar-based input.
- Alternative Calendar Systems - Provides support for non-Gregorian systems including Hijri, Persian, Buddhist, Ethiopic, and Hebrew calendars.
- Calendar Localizations - Uses the native Intl API to handle locale-specific formatting and regional calendar translations.
- Internationalized Date Formatting - Adapts calendar displays and date formats to match the language and regional requirements of global users.
- Date Metadata Visualization - Supports applying custom visual modifiers to highlight specific dates, such as holidays or events, within the calendar grid.
- Calendar Visual Customizations - Allows for custom visual styles and highlighting to match unique brand design systems.
- Calendar Date Calculations - Provides a utility layer for date arithmetic to calculate selection boundaries and spans.
- Visual Customization - Provides comprehensive options for modifying the visual style, layout, and navigation controls to match custom designs.
- Selection Constraints - Prevents the selection of specific dates or ranges based on defined business rules and constraints.
- State Class Mapping - Maps custom boolean modifiers to CSS classes to apply visual styles to specific dates.
- Component Composition - Utilizes a composition-based architecture to build the calendar using specialized sub-components for grids and headers.
- Component State Management - Implements controlled component patterns to sync date selection states via React props.
- Accessibility Attribute Mapping - Maps internal component states to WAI-ARIA attributes to ensure screen reader compatibility.
- Date And Time - Flexible and customizable date picker.
