API v9.7.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. |
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. |
DayProps | - |
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. |
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 | - |
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. |