Skip to main content
Version: 8.10.1

API Reference

Enumerations​

EnumerationDescription
InternalModifierThe name of the modifiers that are used internally by DayPicker.

Interfaces​

InterfaceDescription
CaptionLabelPropsThe props for the CaptionLabel component.
CaptionPropsRepresent the props of the Caption component.
CustomComponentsMap of the components that can be changed using the components prop.
DayContentPropsRepresent the props for the DayContent component.
DayPickerBaseThe base props for the DayPicker component and the
DayPickerContextValueThe value of the DayPickerContext extends the props from DayPicker
DayPickerDefaultPropsThe props for the DayPicker component when using mode="default" or
DayPickerMultiplePropsThe props for the DayPicker component when using mode="multiple".
DayPickerProviderPropsThe props for the DayPickerProvider.
DayPickerRangePropsThe props for the DayPicker component when using mode="range".
DayPickerSinglePropsThe props for the DayPicker component when using mode="single".
DayPropsRepresent the props used by the Day component.
DropdownPropsThe props for the Dropdown component.
FooterProps-
NavigationContextValueRepresents the value of the NavigationContext.
RowPropsThe props for the Row component.
SelectMultipleContextValueRepresents the value of a SelectMultipleContext.
SelectRangeContextValueRepresents the value of a SelectRangeContext.
SelectRangeProviderProps-
SelectSingleContextValueRepresents the value of a SelectSingleContext.
SelectSingleProviderProps-
UseInputOptions-
UseInputValueRepresent the value returned by useInput.
WeekNumberPropsThe props for the WeekNumber component.

Type Aliases​

Type aliasDescription
ActiveModifiersThe modifiers that are matching a day in the calendar. Use the
ButtonPropsThe props for the Button component.
CaptionLayoutThe layout of the caption:
ClassNamesThe class names of each element.
CustomModifiersA map of matchers used as custom modifiers by DayPicker component. This is
DateAfterA matcher to match a day falling after the specified date, with the date not
DateBeforeA matcher to match a day falling before the specified date, with the date not
DateFormatter-
DateIntervalA matcher to match a day falling before and/or after two dates, where the
DateRangeA matcher to match a range of dates. The range can be open. Differently from
DayClickEventHandler-
DayFocusEventHandler-
DayKeyboardEventHandler-
DayLabel-
DayModifiersThe custom modifiers passed to the DayPickerBase.modifiers.
DayMouseEventHandler-
DayOfWeekA matcher to match a date being one of the specified days of the week (0-6,
DayPickerProps-
DayPointerEventHandler-
DayRender-
DaySelectionModeSelection modes supported by DayPicker.
DayTouchEventHandler-
FocusContextValueRepresents the value of the FocusContext.
FocusProviderProps-
FormattersRepresent a map of formatters used to render localized content.
InputDayPickerPropsThe props to attach to the DayPicker component when using useInput.
InputPropsThe props to attach to the input field when using useInput.
InternalModifiersMap of matchers used for the internal modifiers.
InternalModifiersElementThese elements must not be in the styles or classNames records as they
LabelsMap of functions to translate ARIA labels for the relative elements.
MatcherA value or a function that matches a specific day.
ModifierA modifier represents different styles or states of a day displayed in the
ModifiersThe modifiers used by DayPicker.
ModifiersClassNamesThe classnames to assign to each day element matching a modifier.
ModifiersStylesThe style to apply to each day element matching a modifier.
MonthChangeEventHandler-
MonthsPropsThe props for the Months component.
NavButtonLabel-
RootContextThe props of RootProvider.
SelectMultipleEventHandler-
SelectMultipleModifiersRepresent the modifiers that are changed by the multiple selection.
SelectMultipleProviderProps-
SelectRangeEventHandler-
SelectRangeModifiersRepresent the modifiers that are changed by the range selection.
SelectSingleEventHandler-
StyledComponentProps of a component that can be styled via classNames or inline-styles.
StyledElementThe style (either via class names or via in-line styles) of an element.
StylesThe inline-styles of each styled element, to use with the styles prop. Day
WeekNumberClickEventHandler-
WeekNumberFormatter-
WeekNumberLabel-
WeekdayLabel-

Variables​

VariableDescription
DayPickerContextThe DayPicker context shares the props passed to DayPicker within internal
FocusContextThe Focus context shares details about the focused day for the keyboard
NavigationContextThe Navigation context shares details and methods to navigate the months in
SelectMultipleContextThe SelectMultiple context shares details about the selected days when in
SelectRangeContextThe SelectRange context shares details about the selected days when in range
SelectSingleContextThe SelectSingle context shares details about the selected days when in

Functions​

FunctionDescription
ButtonRender a button HTML element applying the reset class name.
CaptionRender the caption of a month. The caption has a different layout when
CaptionDropdownsRender a caption with the dropdowns to navigate between months and years.
CaptionLabelRender the caption for the displayed month. This component is used when
CaptionNavigationRender a caption with a button-based navigation.
DayThe content of a day cell – as a button or span element according to its
DayContentRender the content of the day cell.
DayPickerDayPicker is a React component to create date pickers, calendars, and date
DayPickerProviderThe provider for the DayPickerContext, assigning the defaults from the
DropdownRender a styled select component – displaying a caption and a custom
FocusProviderThe provider for the FocusContext.
FooterRender the Footer component (empty as default).
HeadRender the table head.
HeadRowRender the HeadRow component - i.e. the table head row with the weekday
IconDropdownRender the icon in the styled drop-down.
IconLeftRender the "previous month" button in the navigation.
IconRightRender the "next month" button in the navigation.
MonthsRender the wrapper for the month grids.
NavigationProviderProvides the values for the NavigationContext.
RootProviderProvide the value for all the context providers.
RowRender a row in the calendar, with the days and the week number.
SelectMultipleProviderProvides the values for the SelectMultipleContext.
SelectMultipleProviderInternal-
SelectRangeProviderProvides the values for the SelectRangeProvider.
SelectRangeProviderInternal-
SelectSingleProviderProvides the values for the SelectSingleProvider.
SelectSingleProviderInternal-
WeekNumberRender the week number element. If onWeekNumberClick is passed to
addToRangeAdd a day to an existing range.
isDateAfterTypeReturns true if value is of type DateAfter.
isDateBeforeTypeReturns true if value is of type DateBefore.
isDateIntervalReturns true if matcher is of type DateInterval.
isDateRangeReturns true if value is a DateRange type.
isDayOfWeekTypeReturns true if value is a DayOfWeek type.
isDayPickerDefaultReturns true when the props are of type DayPickerDefaultProps.
isDayPickerMultipleReturns true when the props are of type DayPickerMultipleProps.
isDayPickerRangeReturns true when the props are of type DayPickerRangeProps.
isDayPickerSingleReturns true when the props are of type DayPickerSingleProps.
isMatchReturns whether a day matches against at least one of the given Matchers.
useActiveModifiersReturn the active modifiers for the specified day.
useDayPickerHook to access the DayPickerContextValue.
useDayRenderReturn props and data used to render the Day component.
useFocusContextHook to access the FocusContextValue. Use this hook to handle the
useInputReturn props and setters for binding an input field to DayPicker.
useNavigationHook to access the NavigationContextValue. Use this hook to navigate
useSelectMultipleHook to access the SelectMultipleContextValue.
useSelectRangeHook to access the SelectRangeContextValue.
useSelectSingleHook to access the SelectSingleContextValue.