Enumerations
| Enumeration | Description |
|---|---|
| InternalModifier | The name of the modifiers that are used internally by DayPicker. |
Interfaces
| Interface | Description |
|---|---|
| CaptionLabelProps | The props for the CaptionLabel component. |
| CaptionProps | Represent the props of the Caption component. |
| CustomComponents | Map of the components that can be changed using the components prop. |
| DayContentProps | Represent the props for the DayContent component. |
| DayPickerBase | The base props for the DayPicker component and the DayPickerContext. |
| DayPickerContextValue | The value of the DayPickerContext extends the props from DayPicker with default and cleaned up values. |
| DayPickerDefaultProps | The props for the DayPicker component when using mode="default" or undefined. |
| DayPickerMultipleProps | The props for the DayPicker component when using mode="multiple". |
| DayPickerProviderProps | The props for the DayPickerProvider. |
| DayPickerRangeProps | The props for the DayPicker component when using mode="range". |
| DayPickerSingleProps | The props for the DayPicker component when using mode="single". |
| DayProps | Represent the props used by the Day component. |
| DropdownProps | The props for the Dropdown component. |
| FooterProps | - |
| NavigationContextValue | Represents the value of the NavigationContext. |
| RootContext | The props of RootProvider. |
| RowProps | The props for the Row component. |
| SelectMultipleContextValue | Represents the value of a SelectMultipleContext. |
| SelectRangeContextValue | Represents the value of a SelectRangeContext. |
| SelectRangeProviderProps | - |
| SelectSingleContextValue | Represents the value of a SelectSingleContext. |
| SelectSingleProviderProps | - |
| UseInputOptions | - |
| UseInputValue | Represent the value returned by useInput. |
| WeekNumberProps | The props for the WeekNumber component. |
Type Aliases
| Type alias | Description |
|---|---|
| ActiveModifiers | The modifiers that are matching a day in the calendar. Use the useActiveModifiers hook to get the modifiers for a day.const activeModifiers: ActiveModifiers = { selected: true, customModifier: true } |
| ButtonProps | The props for the Button component. |
| CaptionLayout | The layout of the caption: - dropdown: display dropdowns for choosing the month and the year.- buttons: display previous month / next month buttons.- dropdown-buttons: display both month / year dropdowns and previous month / next month buttons. |
| ClassNames | The class names of each element. |
| CustomModifiers | A map of matchers used as custom modifiers by DayPicker component. This is the same as []], but it accepts only array of [Matchers. |
| DateAfter | A matcher to match a day falling after the specified date, with the date not included. |
| DateBefore | A matcher to match a day falling before the specified date, with the date not included. |
| DateFormatter | - |
| DateInterval | A matcher to match a day falling before and/or after two dates, where the dates are not included. |
| DateRange | A matcher to match a range of dates. The range can be open. Differently from DateInterval, the dates here are included. |
| DayClickEventHandler | - |
| DayFocusEventHandler | - |
| DayKeyboardEventHandler | - |
| DayLabel | - |
| DayModifiers | The custom modifiers passed to the DayPickerBase.modifiers. |
| DayMouseEventHandler | - |
| DayOfWeek | A matcher to match a date being one of the specified days of the week (0-6, where 0 is Sunday). |
| DayPickerProps | - |
| DayPointerEventHandler | - |
| DayRender | - |
| DaySelectionMode | Selection modes supported by DayPicker. - single: use DayPicker to select single days.- multiple: allow selecting multiple days.- range: use DayPicker to select a range of days- default: disable the built-in selection behavior. Customize what isselected by using DayPickerBase.onDayClick. |
| DayTouchEventHandler | - |
| FocusContextValue | Represents the value of the FocusContext. |
| FocusProviderProps | - |
| Formatters | Represent a map of formatters used to render localized content. |
| InputDayPickerProps | The props to attach to the DayPicker component when using useInput. |
| InputProps | The props to attach to the input field when using useInput. |
| InternalModifiers | Map of matchers used for the internal modifiers. |
| InternalModifiersElement | These elements must not be in the styles or classNames records as they are styled via the modifiersStyles or modifiersClassNames pop |
| Labels | Map of functions to translate ARIA labels for the relative elements. |
| Matcher | A value or a function that matches a specific day. Matchers are passed to DayPicker via DayPickerBase.disabled, []] or [DayPickerProps.selected and are used to determine if a day should get a Modifier. Matchers can be of different types: // will always match the day const booleanMatcher: Matcher = true; // will match the today's date const dateMatcher: Matcher = new Date(); // will match the days in the array const arrayMatcher: Matcher = [new Date(2019, 1, 2), new Date(2019, 1, 4)]; // will match days after the 2nd of February 2019 const afterMatcher: DateAfter = { after: new Date(2019, 1, 2) }; // will match days before the 2nd of February 2019 } const beforeMatcher: DateBefore = { before: new Date(2019, 1, 2) }; // will match Sundays const dayOfWeekMatcher: DayOfWeek = { dayOfWeek: 0 }; // will match the included days, except the two dates const intervalMatcher: DateInterval = { after: new Date(2019, 1, 2), before: new Date(2019, 1, 5) }; // will match the included days, including the two dates const rangeMatcher: DateRange = { from: new Date(2019, 1, 2), to: new Date(2019, 1, 5) }; // will match when the function return true const functionMatcher: Matcher = (day: Date) => { return day.getMonth() === 2 // match when month is March }; |
| Modifier | A modifier represents different styles or states of a day displayed in the calendar. |
| Modifiers | The modifiers used by DayPicker. |
| ModifiersClassNames | The classnames to assign to each day element matching a modifier. |
| ModifiersStyles | The style to apply to each day element matching a modifier. |
| MonthChangeEventHandler | - |
| MonthsProps | The props for the Months component. |
| NavButtonLabel | - |
| SelectMultipleEventHandler | - |
| SelectMultipleModifiers | Represent the modifiers that are changed by the multiple selection. |
| SelectMultipleProviderProps | - |
| SelectRangeEventHandler | - |
| SelectRangeModifiers | Represent the modifiers that are changed by the range selection. |
| SelectSingleEventHandler | - |
| StyledComponent | Props of a component that can be styled via classNames or inline-styles. |
| StyledElement | The style (either via class names or via in-line styles) of an element. |
| Styles | The inline-styles of each styled element, to use with the styles prop. Daymodifiers, such as today or hidden, should be styled using themodifiersStyles prop. |
| WeekNumberClickEventHandler | - |
| WeekNumberFormatter | - |
| WeekNumberLabel | - |
| WeekdayLabel | - |
Variables
| Variable | Description |
|---|---|
| DayPickerContext | The DayPicker context shares the props passed to DayPicker within internal and custom components. It is used to set the default values and perform one-time calculations required to render the days. Access to this context from the useDayPicker hook. |
| FocusContext | The Focus context shares details about the focused day for the keyboard Access this context from the useFocusContext hook. |
| NavigationContext | The Navigation context shares details and methods to navigate the months in DayPicker. Access this context from the useNavigation hook. |
| SelectMultipleContext | The SelectMultiple context shares details about the selected days when in multiple selection mode. Access this context from the useSelectMultiple hook. |
| SelectRangeContext | The SelectRange context shares details about the selected days when in range selection mode. Access this context from the useSelectRange hook. |
| SelectSingleContext | The SelectSingle context shares details about the selected days when in single selection mode. Access this context from the useSelectSingle hook. |
Functions
| Function | Description |
|---|---|
| Button | Render a button HTML element applying the reset class name. |
| Caption | Render the caption of a month. The caption has a different layout when setting the DayPickerBase.captionLayout prop. |
| CaptionDropdowns | Render a caption with the dropdowns to navigate between months and years. |
| CaptionLabel | Render the caption for the displayed month. This component is used when captionLayout="buttons". |
| CaptionNavigation | Render a caption with a button-based navigation. |
| Day | The content of a day cell – as a button or span element according to its modifiers. |
| DayContent | Render the content of the day cell. |
| DayPicker | DayPicker render a date picker component to let users pick dates from a calendar. See http://react-day-picker.js.org for updated documentation and examples. ### Customization DayPicker offers different customization props. For example, - show multiple months using numberOfMonths- display a dropdown to navigate the months via captionLayout- display the week numbers with showWeekNumbers- disable or hide days with disabled or hidden### Controlling the months Change the initially displayed month using the defaultMonth prop. Thedisplayed months are controlled by DayPicker and stored in its internal state. To control the months yourself, use month instead of defaultMonthand use the onMonthChange event to set it.To limit the months the user can navigate to, use fromDate/fromMonth/fromYear or toDate/toMonth/toYear.### Selection modes DayPicker supports different selection mode that can be toggled using the mode prop:- mode="single": only one day can be selected. Use required to make theselection required. Use the onSelect event handler to get the selecteddays. - mode="multiple": users can select one or more days. Limit the amount ofdays that can be selected with the min or the max props.- mode="range": users can select a range of days. Limit the amount of daysin the range with the min or the max props.- mode="default" (default): the built-in selections are disabled. Implementyour own selection mode with onDayClick.The selection modes should cover the most common use cases. In case you need a more refined way of selecting days, use mode="default". Use theselected props and add the day event handlers to add/remove days from theselection. ### Modifiers A modifier represents different styles or states for the days displayed in the calendar (like "selected" or "disabled"). Define custom modifiers using the modifiers prop.### Formatters and custom component You can customize how the content is displayed in the date picker by using either the formatters or replacing the internal components. For the most common cases you want to use the formatters prop to change howthe content is formatted in the calendar. Use the components prop toreplace the internal components, like the navigation icons. ### Styling DayPicker comes with a default, basic style in react-day-picker/style – useit as template for your own style. If you are using CSS modules, pass the imported styles object the classNames props.You can also style the elements via inline styles using the styles prop.### Form fields If you need to bind the date picker to a form field, you can use the useInput hooks for a basic behavior. See the useInput source as anexample to bind the date picker with form fields. ### Localization To localize DayPicker, import the locale from date-fns package and use thelocale prop.For example, to use Spanish locale: import { es } from 'date-fns/locale'; <DayPicker locale={es} /> |
| DayPickerProvider | The provider for the DayPickerContext, assigning the defaults from the initial DayPicker props. |
| Dropdown | Render a styled select component – displaying a caption and a custom drop-down icon. |
| FocusProvider | The provider for the FocusContext. |
| Footer | Render the Footer component (empty as default). |
| Head | Render the table head. |
| HeadRow | Render the HeadRow component - i.e. the table head row with the weekday names. |
| IconDropdown | Render the icon in the styled drop-down. |
| IconLeft | Render the "previous month" button in the navigation. |
| IconRight | Render the "next month" button in the navigation. |
| Months | Render the wrapper for the month grids. |
| NavigationProvider | Provides the values for the NavigationContext. |
| RootProvider | Provide the value for all the context providers. |
| Row | Render a row in the calendar, with the days and the week number. |
| SelectMultipleProvider | Provides the values for the SelectMultipleContext. |
| SelectMultipleProviderInternal | - |
| SelectRangeProvider | Provides the values for the SelectRangeProvider. |
| SelectRangeProviderInternal | - |
| SelectSingleProvider | Provides the values for the SelectSingleProvider. |
| SelectSingleProviderInternal | - |
| WeekNumber | Render the week number element. If onWeekNumberClick is passed to DayPicker, itrenders a button, otherwise a span element. |
| addToRange | Add a day to an existing range. The returned range takes in account the undefined values and if the addedday is already present in the range. |
| 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. |
| isDayPickerDefault | Returns true when the props are of type DayPickerDefaultProps. |
| isDayPickerMultiple | Returns true when the props are of type DayPickerMultipleProps. |
| isDayPickerRange | Returns true when the props are of type DayPickerRangeProps. |
| isDayPickerSingle | Returns true when the props are of type DayPickerSingleProps. |
| isMatch | Returns whether a day matches against at least one of the given Matchers.const day = new Date(2022, 5, 19); const matcher1: DateRange = { from: new Date(2021, 12, 21), to: new Date(2021, 12, 30) } const matcher2: DateRange = { from: new Date(2022, 5, 1), to: new Date(2022, 5, 23) } const isMatch(day, [matcher1, matcher2]); // true, since day is in the matcher1 range. |
| useActiveModifiers | Return the active modifiers for the specified day. This hook is meant to be used inside internal or custom components. |
| useDayPicker | Hook to access the DayPickerContextValue. Use the DayPicker context to access to the props passed to DayPicker inside internal or custom components. |
| useDayRender | Return props and data used to render the Day component. Use this hook when creating a component to replace the built-in Daycomponent. |
| useFocusContext | Hook to access the FocusContextValue. Use this hook to handle the focus state of the elements. This hook is meant to be used inside internal or custom components. |
| useInput | Return props and setters for binding an input field to DayPicker. |
| useNavigation | Hook to access the NavigationContextValue. Use this hook to navigate between months or years in DayPicker. This hook is meant to be used inside internal or custom components. |
| useSelectMultiple | Hook to access the SelectMultipleContextValue. This hook is meant to be used inside internal or custom components. |
| useSelectRange | Hook to access the SelectRangeContextValue. This hook is meant to be used inside internal or custom components. |
| useSelectSingle | Hook to access the SelectSingleContextValue. This hook is meant to be used inside internal or custom components. |