API v9.4.4

DayPicker

Function, Type alias, Interface	Description
DayPicker	Render the date picker calendar.
DayPickerProps	The props for the <DayPicker /> component.
OnSelectHandler	Shared handler type for onSelect callback when a selection mode is set.
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	Represent the day displayed in the calendar.
CalendarMonth	Represent a month in a calendar year. Contains the weeks within the month.
CalendarWeek	Represent a week in a calendar month.
DateLib	A wrapper class around date-fns sharing the same options. Methods of this class can be overridden using the PropsBase.dateLib prop.

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 the gridcell of a day in the calendar and handle the interaction and the focus with they day.
DayButton	Render the button for a day in the calendar.
Dropdown	Render a dropdown component to use in the navigation bar.
DropdownNav	Render the the navigation dropdowns.
Footer	Component wrapping the footer.
Month	Render the grid with the weekday header row and the weeks for the given month.
MonthCaption	Render the caption of a month in the calendar.
MonthGrid	Render the grid of days in a month.
Months	Component wrapping the month grids.
MonthsDropdown	Render the dropdown to navigate between months.
Nav	Render the toolbar with the navigation button.
NextMonthButton	Render the next month button element in the calendar.
Option	Render the option element.
PreviousMonthButton	Render the previous month button element in the calendar.
Root	Render the root element.
Select	Render the select element.
Week	Render a row in the calendar, with the days and the week number.
Weekday	Render the column header with the weekday name (e.g. "Mo", "Tu", etc.).
Weekdays	Render the row with the weekday names.
WeekNumber	Render the cell with the number of the week.
WeekNumberHeader	Render the column header for the week numbers.
Weeks	Render the weeks in the month grid.
YearsDropdown	Render the dropdown to navigate between years.

Formatters

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

Labels

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

Utilities

Function	Description
addToRange	Add a day to an existing range.
dateMatchModifiers	Returns whether a day matches against at least one of the given Matcher.
getDefaultClassNames	Get the default class names for the UI elements.
isDateAfterType	Returns true if value is of type DateAfter.
isDateBeforeType	Returns true if value is of type DateBefore.
isDateInterval	Returns true if matcher is of type DateInterval.
isDateRange	Returns true if value is a DateRange type.
isDayOfWeekType	Returns true if value is a DayOfWeek type.
rangeContainsDayOfWeek	Returns whether a date range contains one or more days of the week.
rangeContainsModifiers	Returns whether a range contains dates that match the given modifiers.
rangeIncludesDate	Determines whether a given date is inside a specified date range.
rangeOverlaps	Determines whether a given range overlaps with another range.

Hooks

Function	Description
useDayPicker	Returns the context to work with <DayPicker /> inside custom components.

Enumerations

Enumeration	Description
DayFlag	The flags for the UI.Day.
SelectionState	The state that can be applied to the UI.Day element when in selection mode.
UI	The UI elements composing DayPicker. These elements are mapped to CustomComponents, the ClassNames and the Styles used by DayPicker.

Interfaces

Interface	Description
DateLibOptions	The options for the DateLib class.

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 changed using the components prop.
DateAfter	Match a day falling after the specified date, with the date not included.
DateBefore	Match a day falling before the specified date, with the date not included.
DateInterval	An interval of dates. Differently from DateRange, the range ends here are not included.
DateRange	A range of dates. The range can be open. Differently from DateInterval, the range ends here are included.
DayButtonProps	-
DayEventHandler	The event handler triggered when clicking or interacting with a day.
DayOfWeek	Match dates being one of the specified 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.
DayProps	-
DeprecatedUI	Deprecated UI elements and flags.
DropdownNavProps	-
DropdownOption	An option to use in the dropdown. Maps to the <option> HTML element.
DropdownProps	-
FooterProps	-
Formatters	Represent a map of formatters used to render localized content.
Labels	Map of functions to translate ARIA labels for the relative elements.
Matcher	A value or a function that matches a specific day.
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	-
MoveFocusBy	The temporal unit to move the focus by.
MoveFocusDir	The direction to move the focus relative to the current focused date.
NavProps	-
NextMonthButtonProps	-
OptionProps	-
PreviousMonthButtonProps	-
RootProps	-
SelectedMulti	-
SelectedRange	-
SelectedSingle	-
SelectedValue	-
SelectHandler	-
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.