Skip to main content

API v9.7.0

DayPicker

NameDescription
DayPickerRenders the DayPicker calendar component.
DayPickerPropsThe props for the <DayPicker /> component.
PropsBaseProps for customizing the calendar, handling localization, and managing events. These exclude the selection mode props.
PropsMultiThe props when the multiple selection is optional.
PropsMultiRequiredThe props when the multiple selection is required.
PropsRangeThe props when the range selection is optional.
PropsRangeRequiredThe props when the range selection is required.
PropsSingleThe props when the single selection is optional.
PropsSingleRequiredThe props when the single selection is required.

Classes

ClassDescription
CalendarDayRepresents a day displayed in the calendar.
CalendarMonthRepresents a month in a calendar year.
CalendarWeekRepresents a week in a calendar month.
DateLibA wrapper class around date-fns that provides utility methods for date manipulation and formatting.

Components

FunctionDescription
CaptionLabelRender the label in the month caption.
ChevronRender the chevron icon used in the navigation buttons and dropdowns.
DayRender a grid cell for a specific day in the calendar.
DayButtonRender a button for a specific day in the calendar.
DropdownRender a dropdown component for navigation in the calendar.
DropdownNavRender the navigation dropdowns for the calendar.
FooterRender the footer of the calendar.
MonthRender the grid with the weekday header row and the weeks for a specific month.
MonthCaptionRender the caption for a month in the calendar.
MonthGridRender the grid of days for a specific month.
MonthsRender a container wrapping the month grids.
MonthsDropdownRender a dropdown to navigate between months in the calendar.
NavRender the navigation toolbar with buttons to navigate between months.
NextMonthButtonRender the button to navigate to the next month in the calendar.
OptionRender an option element.
PreviousMonthButtonRender the button to navigate to the previous month in the calendar.
RootRender the root element of the calendar.
SelectRender a select element.
WeekRender a table row representing a week in the calendar.
WeekdayRender a table header cell with the name of a weekday (e.g., "Mo", "Tu").
WeekdaysRender the table row containing the weekday names.
WeekNumberRender a table cell displaying the number of the week.
WeekNumberHeaderRender the header cell for the week numbers column.
WeeksRender the container for the weeks in the month grid.
YearsDropdownRender a dropdown to navigate between years in the calendar.

Formatters

FunctionDescription
formatCaptionFormats the caption of the month.
formatDayFormats the day date shown in the day cell.
formatMonthDropdownFormats the month for the dropdown option label.
formatWeekdayNameFormats the name of a weekday to be displayed in the weekdays header.
formatWeekNumberFormats the week number.
formatWeekNumberHeaderFormats the header for the week number column.
formatYearDropdownFormats the year for the dropdown option label.

Labels

FunctionDescription
labelDayButtonGenerates the ARIA label for a day button.
labelGridGenerates the ARIA label for the month grid, which is announced when entering the grid.
labelGridcellGenerates the label for a day grid cell when the calendar is not interactive.
labelMonthDropdownGenerates the ARIA label for the months dropdown.
labelNavGenerates the ARIA label for the navigation toolbar.
labelNextGenerates the ARIA label for the "next month" button.
labelPreviousGenerates the ARIA label for the "previous month" button.
labelWeekdayGenerates the ARIA label for a weekday column header.
labelWeekNumberGenerates the ARIA label for the week number cell (the first cell in a row).
labelWeekNumberHeaderGenerates the ARIA label for the week number header element.
labelYearDropdownGenerates the ARIA label for the years dropdown.

Utilities

FunctionDescription
addToRangeAdds a date to an existing range, considering constraints like minimum and maximum range size.
dateMatchModifiersChecks if a given date matches at least one of the specified Matcher.
getDefaultClassNamesReturns the default class names for the UI elements.
isDateAfterTypeChecks if the given value is of type DateAfter.
isDateBeforeTypeChecks if the given value is of type DateBefore.
isDateIntervalChecks if the given value is of type DateInterval.
isDateRangeChecks if the given value is of type DateRange.
isDayOfWeekTypeChecks if the given value is of type DayOfWeek.
rangeContainsDayOfWeekChecks if a date range contains one or more specified days of the week.
rangeContainsModifiersChecks if a date range contains dates that match the given modifiers.
rangeIncludesDateChecks if a given date is within a specified date range.
rangeOverlapsDetermines if two date ranges overlap.

Hooks

FunctionDescription
useDayPickerProvides 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

EnumerationDescription
AnimationEnum representing different animation states for transitioning between months.
DayFlagEnum representing flags for the UI.Day element.
SelectionStateEnum representing selection states that can be applied to the UI.Day element in selection mode.
UIEnum representing the UI elements composing DayPicker. These elements are mapped to CustomComponents, ClassNames, and Styles.

Interfaces

InterfaceDescription
DateLibOptionsThe options for the DateLib class.

Type Aliases

Type AliasDescription
ButtonProps-
CaptionLabelProps-
ChevronProps-
ClassNamesThe CSS classnames to use for the UI elements, the SelectionState and the DayFlag.
CustomComponentsThe components that can be customized using the components prop.
DateAfterMatch a day falling after the specified date (exclusive).
DateBeforeMatch a day falling before the specified date (exclusive).
DateIntervalAn interval of dates. Unlike DateRange, the range ends are not included.
DateRangeA range of dates. Unlike DateInterval, the range ends are included.
DayButtonProps-
DayEventHandlerThe event handler triggered when clicking or interacting with a day.
DayOfWeekMatch days of the week (0-6, where 0 is Sunday).
DayPickerContextRepresents the context for the DayPicker component, providing various properties and methods to interact with the calendar.
DayProps-
DeprecatedUIDeprecated UI elements and flags from previous versions of DayPicker.
DropdownNavProps-
DropdownOptionAn option to use in the dropdown. Maps to the <option> HTML element.
DropdownProps-
FooterProps-
FormattersRepresents a map of formatters used to render localized content.
LabelsA map of functions to translate ARIA labels for various elements.
MatcherA value or a function that matches specific days.
ModeSelection modes supported by DayPicker.
ModifiersRepresents the modifiers that match a specific day in the calendar.
ModifiersClassNamesThe classnames to assign to each day element matching a modifier.
ModifiersStylesThe style to apply to each day element matching a modifier.
MonthCaptionProps-
MonthChangeEventHandlerThe event handler when a month is changed in the calendar.
MonthGridProps-
MonthProps-
MonthsProps-
MoveFocusByThe temporal unit to move the focus by.
MoveFocusDirThe direction to move the focus relative to the current focused date.
NavProps-
NextMonthButtonProps-
NumeralsThe numbering system supported by DayPicker.
OnSelectHandlerShared handler type for onSelect callback when a selection mode is set.
OptionProps-
PreviousMonthButtonProps-
RootProps-
SelectedMulti-
SelectedRange-
SelectedSingle-
SelectedValueRepresents the selected value based on the selection mode.
SelectHandlerThe handler to set a selection based on the mode.
SelectHandlerMulti-
SelectHandlerRange-
SelectHandlerSingle-
Selection-
SelectProps-
StylesThe CSS styles to use for the UI elements, the SelectionState and the DayFlag.
WeekdayProps-
WeekdaysProps-
WeekNumberHeaderProps-
WeekNumberProps-
WeekProps-
WeeksProps-

Variables

VariableDescription
defaultDateLibThe default date library with English locale.