API v9.12.0

DayPicker

Name	Description
DayPicker	Renders the DayPicker calendar component.
DayPickerProps	The props for the <DayPicker /> component.
PropsBase	Props for customizing the calendar, handling localization, and managing events. These exclude the selection mode props.
PropsMulti	The props when the multiple selection is optional.
PropsMultiRequired	The props when the multiple selection is required.
PropsRange	The props when the range selection is optional.
PropsRangeRequired	The props when the range selection is required.
PropsSingle	The props when the single selection is optional.
PropsSingleRequired	The props when the single selection is required.

Classes

Class	Description
CalendarDay	Represents a day displayed in the calendar.
CalendarMonth	Represents a month in a calendar year.
CalendarWeek	Represents a week in a calendar month.
DateLib	A wrapper class around date-fns that provides utility methods for date manipulation and formatting.

Components

Function	Description
CaptionLabel	Render the label in the month caption.
Chevron	Render the chevron icon used in the navigation buttons and dropdowns.
Day	Render a grid cell for a specific day in the calendar.
DayButton	Render a button for a specific day in the calendar.
Dropdown	Render a dropdown component for navigation in the calendar.
DropdownNav	Render the navigation dropdowns for the calendar.
Footer	Render the footer of the calendar.
Month	Render the grid with the weekday header row and the weeks for a specific month.
MonthCaption	Render the caption for a month in the calendar.
MonthGrid	Render the grid of days for a specific month.
Months	Render a container wrapping the month grids.
MonthsDropdown	Render a dropdown to navigate between months in the calendar.
Nav	Render the navigation toolbar with buttons to navigate between months.
NextMonthButton	Render the button to navigate to the next month in the calendar.
Option	Render an option element.
PreviousMonthButton	Render the button to navigate to the previous month in the calendar.
Root	Render the root element of the calendar.
Select	Render a select element.
Week	Render a table row representing a week in the calendar.
Weekday	Render a table header cell with the name of a weekday (e.g., "Mo", "Tu").
Weekdays	Render the table row containing the weekday names.
WeekNumber	Render a table cell displaying the number of the week.
WeekNumberHeader	Render the header cell for the week numbers column.
Weeks	Render the container for the weeks in the month grid.
YearsDropdown	Render a dropdown to navigate between years in the calendar.

Formatters

Function	Description
formatCaption	Formats the caption of the month.
formatDay	Formats the day date shown in the day cell.
formatMonthDropdown	Formats the month for the dropdown option label.
formatWeekdayName	Formats the name of a weekday to be displayed in the weekdays header.
formatWeekNumber	Formats the week number.
formatWeekNumberHeader	Formats the header for the week number column.
formatYearDropdown	Formats the year for the dropdown option label.

Labels

Function	Description
labelDayButton	Generates the ARIA label for a day button.
labelGrid	Generates the ARIA label for the month grid, which is announced when entering the grid.
labelGridcell	Generates the label for a day grid cell when the calendar is not interactive.
labelMonthDropdown	Generates the ARIA label for the months dropdown.
labelNav	Generates the ARIA label for the navigation toolbar.
labelNext	Generates the ARIA label for the "next month" button.
labelPrevious	Generates the ARIA label for the "previous month" button.
labelWeekday	Generates the ARIA label for a weekday column header.
labelWeekNumber	Generates the ARIA label for the week number cell (the first cell in a row).
labelWeekNumberHeader	Generates the ARIA label for the week number header element.
labelYearDropdown	Generates the ARIA label for the years dropdown.

Utilities

Function	Description
addToRange	Adds a date to an existing range, considering constraints like minimum and maximum range size.
dateMatchModifiers	Checks if a given date matches at least one of the specified Matcher.
getDefaultClassNames	Returns the default class names for the UI elements.
isDateAfterType	Checks if the given value is of type DateAfter.
isDateBeforeType	Checks if the given value is of type DateBefore.
isDateInterval	Checks if the given value is of type DateInterval.
isDateRange	Checks if the given value is of type DateRange.
isDayOfWeekType	Checks if the given value is of type DayOfWeek.
rangeContainsDayOfWeek	Checks if a date range contains one or more specified days of the week.
rangeContainsModifiers	Checks if a date range contains dates that match the given modifiers.
rangeIncludesDate	Checks if a given date is within a specified date range.
rangeOverlaps	Determines if two date ranges overlap.

Hooks

Function	Description
useDayPicker	Provides access to the DayPicker context, which includes properties and methods to interact with the DayPicker component. This hook must be used within a custom component.

Enumerations

Enumeration	Description
Animation	Enum representing different animation states for transitioning between months.
DayFlag	Enum representing flags for the UI.Day element.
SelectionState	Enum representing selection states that can be applied to the UI.Day element in selection mode.
UI	Enum representing the UI elements composing DayPicker. These elements are mapped to CustomComponents, ClassNames, and Styles.

Interfaces

Interface	Description
DateLibOptions	The options for the DateLib class.
DayPickerLocale	Locale type used by DayPicker.

Type Aliases

Type Alias	Description
ButtonProps	-
CaptionLabelProps	-
ChevronProps	-
ClassNames	The CSS classnames to use for the UI elements, the SelectionState and the DayFlag.
CustomComponents	The components that can be customized using the components prop.
DateAfter	Match a day falling after the specified date (exclusive).
DateBefore	Match a day falling before the specified date (exclusive).
DateInterval	An interval of dates. Unlike DateRange, the range ends are not included.
DateRange	A range of dates. Unlike DateInterval, the range ends are included.
DayButtonProps	-
DayEventHandler	The event handler triggered when clicking or interacting with a day.
DayOfWeek	Match days of the week (0-6, where 0 is Sunday).
DayPickerContext	Represents the context for the DayPicker component, providing various properties and methods to interact with the calendar.
DayPickerLocaleLabels	Translations for DayPicker-specific labels.
DayProps	-
DeprecatedUI	Deprecated UI elements and flags from previous versions of DayPicker.
DropdownNavProps	-
DropdownOption	An option to use in the dropdown. Maps to the <option> HTML element.
DropdownProps	-
FooterProps	-
Formatters	Represents a map of formatters used to render localized content.
Labels	A map of functions to translate ARIA labels for various elements.
Locale	-
Matcher	A value or a function that matches specific days.
Mode	Selection modes supported by DayPicker.
Modifiers	Represents the modifiers that match a specific day in the calendar.
ModifiersClassNames	The classnames to assign to each day element matching a modifier.
ModifiersStyles	The style to apply to each day element matching a modifier.
MonthCaptionProps	-
MonthChangeEventHandler	The event handler when a month is changed in the calendar.
MonthGridProps	-
MonthProps	-
MonthsProps	-
MonthYearOrder	Indicates the preferred ordering of month and year for localized labels.
MoveFocusBy	The temporal unit to move the focus by.
MoveFocusDir	The direction to move the focus relative to the current focused date.
NavProps	-
NextMonthButtonProps	-
Numerals	The numbering system supported by DayPicker.
OnSelectHandler	Shared handler type for onSelect callback when a selection mode is set.
OptionProps	-
PreviousMonthButtonProps	-
RootProps	-
SelectedMulti	-
SelectedRange	-
SelectedSingle	-
SelectedValue	Represents the selected value based on the selection mode.
SelectHandler	The handler to set a selection based on the mode.
SelectHandlerMulti	-
SelectHandlerRange	-
SelectHandlerSingle	-
Selection	-
SelectProps	-
Styles	The CSS styles to use for the UI elements, the SelectionState and the DayFlag.
WeekdayProps	-
WeekdaysProps	-
WeekNumberHeaderProps	-
WeekNumberProps	-
WeekProps	-
WeeksProps	-

Variables

Variable	Description
defaultDateLib	The default date library with English locale.
defaultLocale	English (United States) locale extended with DayPicker-specific translations.