Skip to main content
Version: 9.0.0-rc.6

API v9.0.0-rc.6

DayPicker

Function, Type aliasDescription
DayPickerRender the date picker calendar.
DayPickerPropsThe props for the <DayPicker /> component.

Props

InterfaceDescription
PropsBaseProps used for customization of the calendar, localization, and event handling.
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
CalendarDayRepresent the day displayed in the calendar.
CalendarMonthRepresent a month in a calendar year. Contains the weeks within the month.
CalendarWeekRepresent a week in a calendar month.

Components

FunctionDescription
ButtonRender the button elements in the calendar.
CaptionLabelRender the label in the month caption.
ChevronRender the chevron icon used in the navigation buttons and dropdowns.
DayRender the gridcell of a day in the calendar and handle the interaction and the focus with they day.
DayButtonRender the button for a day in the calendar.
DropdownRender a dropdown component to use in the navigation bar.
DropdownNavRender the the navigation dropdowns.
FooterComponent wrapping the footer.
MonthRender the grid with the weekday header row and the weeks for the given month.
MonthCaptionRender the caption of a month in the calendar.
MonthGridRender the grid of days in a month.
MonthsComponent wrapping the month grids.
NavRender the toolbar with the navigation button.
OptionRender the option element.
RootRender the root element.
SelectRender the select element.
WeekRender a row in the calendar, with the days and the week number.
WeekNumberRender the cell with the number of the week.
WeekNumberHeaderRender the column header for the week numbers.
WeekdayRender the column header with the weekday name (e.g. "Mo", "Tu", etc.).
WeekdaysRender the row with the weekday names.
WeeksRender the label in the month caption.

Formatters

FunctionDescription
formatCaptionFormat the caption of the month.
formatDayFormat the day date shown in the day cell.
formatMonthDropdownFormat the month number for the dropdown option label.
formatWeekNumberFormat the week number.
formatWeekNumberHeaderFormat the week number header.
formatWeekdayNameFormat the weekday name to be displayed in the weekdays header.
formatYearDropdownFormat the years for the dropdown option label.

Labels

FunctionDescription
labelDayThe ARIA label for the day button.
labelDayButtonThe ARIA label for the day button.
labelGridReturn an ARIA label for the month grid, that will be announced when entering the grid.
labelGridcellThe label for the day gridcell when the calendar is not interactive.
labelMonthDropdownThe ARIA label for the months dropdown.
labelNavThe ARIA label for the navigation toolbar.
labelNextThe ARIA label for next month button.
labelPreviousThe ARIA label for previous month button.
labelWeekNumberThe ARIA label for the week number cell (the first cell in the row).
labelWeekNumberHeaderThe ARIA label for the week number header element.
labelWeekdayThe ARIA label for the Weekday column header.
labelYearDropdownThe ARIA label for the years dropdown.

Utilities

FunctionDescription
addToRangeAdd a day to an existing range.
dateMatchModifiersReturns whether a day matches against at least one of the given Matcher.
getDefaultClassNamesGet the default class names for the UI elements.
isDateAfterTypeReturns true if value is of type DateAfter.
isDateBeforeTypeReturns true if value is of type DateBefore.
isDateInRangeDetermines whether a given date is inside a specified date range.
isDateIntervalReturns true if matcher is of type DateInterval.
isDateRangeReturns true if value is a DateRange type.
isDayOfWeekTypeReturns true if value is a DayOfWeek type.
isMultiReturns true if the props are for a multiple selection mode.
isRangeReturns true if the props are for a range selection mode.
isSingleReturns true if the props are for a single selection mode.

Hooks

FunctionDescription
useDayPickerReturn API to work with <DayPicker /> inside custom components.

Enumerations

EnumerationDescription
DayFlagThe flags for the UI.Day.
SelectionStateThe state that can be applied to the UI.Day element when in selection mode.
UIThe UI elements composing DayPicker. These elements are mapped to CustomComponents, the ClassNames and the Styles used by DayPicker.

Functions

FunctionDescription
isDatesArrayReturns true if value is an array of valid dates.

Interfaces

InterfaceDescription
UseCalendarThe hook to get and handle the calendar state.

Type Aliases

Type aliasDescription
ButtonProps-
CaptionLabelProps-
ClassNamesDefines the class names for various UI components and states.
CustomComponentsThe components that can be changed using the components prop.
CustomModifiersThe custom modifiers matching a day, passed to the modifiers prop.
DataAttributesA record with data-* attributes passed to <DayPicker />.
DateAfterA matcher to match a day falling after the specified date, with the date not included.
DateBeforeA matcher to match a day falling before the specified date, with the date not included.
DateIntervalA matcher to match a day falling before and/or after two dates, where the dates are not included.
DateLib-
DateRangeA matcher to match a range of dates. The range can be open. Differently from DateInterval, the dates here are included.
DayButtonProps-
DayEventHandlerThe event handler triggered when interacting with a day.
DayFlagsThe flags that are matching a day in the calendar.
DayOfWeekA matcher to match a date being one of the specified days of the week (0-6, where 0 is Sunday).
DayProps-
DropdownNavProps-
DropdownOptionAn option to use in the dropdown. Maps to the <option> HTML element.
DropdownProps-
FooterProps-
FormatOptionsThe options for the Formatters.
FormattersRepresent a map of formatters used to render localized content.
LabelOptionsThe options for the Labels.
LabelsMap of functions to translate ARIA labels for the relative elements.
LocaleThe locale used within DayPicker.
MatcherA value or a function that matches a specific day.
ModeSelection modes supported by DayPicker.
ModifiersThe modifiers that are matching a 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-
MoveFocusBy-
MoveFocusDir-
NavProps-
OptionProps-
RootProps-
SelectProps-
SelectionStatesThe selection state that are matching a day in the calendar.
StylesMaps user interface elements, selection states, and flags to a CSS style.
UseModifiers-
UseMulti-
UseRange-
UseSelection-
UseSingle-
V9DeprecatedPropsThe props that have been deprecated since version 9.0.0.
WeekNumberHeaderProps-
WeekNumberProps-
WeekProps-
WeekdayProps-
WeekdaysProps-
WeeksProps-

Variables

VariableDescription
dayPickerContext-