react-day-picker
- Version 8.10.0
- Published
- 1.23 MB
- No dependencies
- MIT license
Install
npm i react-day-picker
yarn add react-day-picker
pnpm add react-day-picker
Overview
Customizable Date Picker for React
Index
Variables
Functions
- addToRange()
- Caption()
- CaptionDropdowns()
- CaptionLabel()
- CaptionNavigation()
- Day()
- DayContent()
- DayPicker()
- DayPickerProvider()
- Dropdown()
- FocusProvider()
- Footer()
- Head()
- HeadRow()
- IconDropdown()
- IconLeft()
- IconRight()
- isDateAfterType()
- isDateBeforeType()
- isDateInterval()
- isDateRange()
- isDayOfWeekType()
- isDayPickerDefault()
- isDayPickerMultiple()
- isDayPickerRange()
- isDayPickerSingle()
- isMatch()
- Months()
- NavigationProvider()
- RootProvider()
- Row()
- SelectMultipleProvider()
- SelectMultipleProviderInternal()
- SelectRangeProvider()
- SelectRangeProviderInternal()
- SelectSingleProvider()
- SelectSingleProviderInternal()
- useActiveModifiers()
- useDayPicker()
- useDayRender()
- useFocusContext()
- useInput()
- useNavigation()
- useSelectMultiple()
- useSelectRange()
- useSelectSingle()
- WeekNumber()
Interfaces
DayPickerBase
- captionLayout
- className
- classNames
- components
- defaultMonth
- dir
- disabled
- disableNavigation
- firstWeekContainsDate
- fixedWeeks
- footer
- formatters
- fromDate
- fromMonth
- fromYear
- hidden
- hideHead
- id
- initialFocus
- ISOWeek
- labels
- lang
- locale
- modifiers
- modifiersClassNames
- modifiersStyles
- month
- nonce
- numberOfMonths
- onDayBlur
- onDayClick
- onDayFocus
- onDayKeyDown
- onDayKeyPress
- onDayKeyUp
- onDayMouseEnter
- onDayMouseLeave
- onDayPointerEnter
- onDayPointerLeave
- onDayTouchCancel
- onDayTouchEnd
- onDayTouchMove
- onDayTouchStart
- onMonthChange
- onNextClick
- onPrevClick
- onWeekNumberClick
- pagedNavigation
- reverseMonths
- selected
- showOutsideDays
- showWeekNumber
- style
- styles
- title
- toDate
- today
- toMonth
- toYear
- weekStartsOn
Enums
Type Aliases
- ActiveModifiers
- ButtonProps
- CaptionLayout
- ClassNames
- CustomModifiers
- DateAfter
- DateBefore
- DateFormatter
- DateInterval
- DateRange
- DayClickEventHandler
- DayFocusEventHandler
- DayKeyboardEventHandler
- DayLabel
- DayModifiers
- DayMouseEventHandler
- DayOfWeek
- DayPickerProps
- DayPointerEventHandler
- DayRender
- DaySelectionMode
- DayTouchEventHandler
- FocusContextValue
- FocusProviderProps
- Formatters
- InputDayPickerProps
- InputProps
- InternalModifiers
- InternalModifiersElement
- Labels
- Matcher
- Modifier
- Modifiers
- ModifiersClassNames
- ModifiersStyles
- MonthChangeEventHandler
- MonthsProps
- NavButtonLabel
- SelectMultipleEventHandler
- SelectMultipleModifiers
- SelectMultipleProviderProps
- SelectRangeEventHandler
- SelectRangeModifiers
- SelectSingleEventHandler
- StyledComponent
- StyledElement
- Styles
- WeekdayLabel
- WeekNumberClickEventHandler
- WeekNumberFormatter
- WeekNumberLabel
Variables
variable Button
const Button: react.ForwardRefExoticComponent<any>;
Render a button HTML element applying the reset class name.
variable DayPickerContext
const DayPickerContext: react.Context<DayPickerContextValue>;
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.
variable FocusContext
const FocusContext: react.Context<FocusContextValue>;
The Focus context shares details about the focused day for the keyboard
Access this context from the useFocusContext hook.
variable NavigationContext
const NavigationContext: react.Context<NavigationContextValue>;
The Navigation context shares details and methods to navigate the months in DayPicker. Access this context from the useNavigation hook.
variable SelectMultipleContext
const SelectMultipleContext: react.Context<SelectMultipleContextValue>;
The SelectMultiple context shares details about the selected days when in multiple selection mode.
Access this context from the useSelectMultiple hook.
variable SelectRangeContext
const SelectRangeContext: react.Context<SelectRangeContextValue>;
The SelectRange context shares details about the selected days when in range selection mode.
Access this context from the useSelectRange hook.
variable SelectSingleContext
const SelectSingleContext: react.Context<SelectSingleContextValue>;
The SelectSingle context shares details about the selected days when in single selection mode.
Access this context from the useSelectSingle hook.
Functions
function addToRange
addToRange: (day: Date, range?: DateRange) => DateRange | undefined;
Add a day to an existing range.
The returned range takes in account the
undefined
values and if the added day is already present in the range.
function Caption
Caption: (props: CaptionProps) => JSX.Element;
Render the caption of a month. The caption has a different layout when setting the DayPickerBase.captionLayout prop.
function CaptionDropdowns
CaptionDropdowns: (props: CaptionProps) => JSX.Element;
Render a caption with the dropdowns to navigate between months and years.
function CaptionLabel
CaptionLabel: (props: CaptionLabelProps) => JSX.Element;
Render the caption for the displayed month. This component is used when
captionLayout="buttons"
.
function CaptionNavigation
CaptionNavigation: (props: CaptionProps) => JSX.Element;
Render a caption with a button-based navigation.
function Day
Day: (props: DayProps) => JSX.Element;
The content of a day cell – as a button or span element according to its modifiers.
function DayContent
DayContent: (props: DayContentProps) => JSX.Element;
Render the content of the day cell.
function DayPicker
DayPicker: ( props: | DayPickerDefaultProps | DayPickerSingleProps | DayPickerMultipleProps | DayPickerRangeProps) => JSX.Element;
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 viacaptionLayout
- display the week numbers withshowWeekNumbers
- disable or hide days withdisabled
orhidden
### Controlling the months
Change the initially displayed month using the
defaultMonth
prop. The displayed months are controlled by DayPicker and stored in its internal state. To control the months yourself, usemonth
instead ofdefaultMonth
and use theonMonthChange
event to set it.To limit the months the user can navigate to, use
fromDate
/fromMonth
/fromYear
ortoDate
/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. Userequired
to make the selection required. Use theonSelect
event handler to get the selected days. -mode="multiple"
: users can select one or more days. Limit the amount of days that can be selected with themin
or themax
props. -mode="range"
: users can select a range of days. Limit the amount of days in the range with themin
or themax
props. -mode="default"
(default): the built-in selections are disabled. Implement your own selection mode withonDayClick
.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 the selection.### 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 how the content is formatted in the calendar. Use thecomponents
prop to replace the internal components, like the navigation icons.### Styling
DayPicker comes with a default, basic style in
react-day-picker/style
– use it 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 theuseInput
source as an example 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} />
function DayPickerProvider
DayPickerProvider: (props: DayPickerProviderProps) => JSX.Element;
The provider for the DayPickerContext, assigning the defaults from the initial DayPicker props.
function Dropdown
Dropdown: (props: DropdownProps) => JSX.Element;
Render a styled select component – displaying a caption and a custom drop-down icon.
function FocusProvider
FocusProvider: (props: FocusProviderProps) => JSX.Element;
The provider for the FocusContext.
function Footer
Footer: (props: FooterProps) => JSX.Element;
Render the Footer component (empty as default).
function Head
Head: () => JSX.Element;
Render the table head.
function HeadRow
HeadRow: () => JSX.Element;
Render the HeadRow component - i.e. the table head row with the weekday names.
function IconDropdown
IconDropdown: (props: StyledComponent) => JSX.Element;
Render the icon in the styled drop-down.
function IconLeft
IconLeft: (props: StyledComponent) => JSX.Element;
Render the "previous month" button in the navigation.
function IconRight
IconRight: (props: StyledComponent) => JSX.Element;
Render the "next month" button in the navigation.
function isDateAfterType
isDateAfterType: (value: unknown) => value is DateAfter;
Returns true if
value
is of type DateAfter.
function isDateBeforeType
isDateBeforeType: (value: unknown) => value is DateBefore;
Returns true if
value
is of type DateBefore.
function isDateInterval
isDateInterval: (matcher: unknown) => matcher is DateInterval;
Returns true if
matcher
is of type DateInterval.
function isDateRange
isDateRange: (value: unknown) => value is DateRange;
Returns true if
value
is a DateRange type.
function isDayOfWeekType
isDayOfWeekType: (value: unknown) => value is DayOfWeek;
Returns true if
value
is a DayOfWeek type.
function isDayPickerDefault
isDayPickerDefault: (props: DayPickerProps) => props is DayPickerDefaultProps;
Returns true when the props are of type DayPickerDefaultProps.
function isDayPickerMultiple
isDayPickerMultiple: ( props: DayPickerProps | DayPickerContextValue) => props is DayPickerMultipleProps;
Returns true when the props are of type DayPickerMultipleProps.
function isDayPickerRange
isDayPickerRange: ( props: DayPickerProps | DayPickerContextValue) => props is DayPickerRangeProps;
Returns true when the props are of type DayPickerRangeProps.
function isDayPickerSingle
isDayPickerSingle: ( props: DayPickerProps | DayPickerContextValue) => props is DayPickerSingleProps;
Returns true when the props are of type DayPickerSingleProps.
function isMatch
isMatch: (day: Date, matchers: Matcher[]) => boolean;
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.
function Months
Months: (props: MonthsProps) => JSX.Element;
Render the wrapper for the month grids.
function NavigationProvider
NavigationProvider: (props: { children?: ReactNode }) => JSX.Element;
Provides the values for the NavigationContext.
function RootProvider
RootProvider: (props: RootContext) => JSX.Element;
Provide the value for all the context providers.
function Row
Row: (props: RowProps) => JSX.Element;
Render a row in the calendar, with the days and the week number.
function SelectMultipleProvider
SelectMultipleProvider: (props: SelectMultipleProviderProps) => JSX.Element;
Provides the values for the SelectMultipleContext.
function SelectMultipleProviderInternal
SelectMultipleProviderInternal: ({ initialProps, children,}: SelectMultipleProviderInternalProps) => JSX.Element;
function SelectRangeProvider
SelectRangeProvider: (props: SelectRangeProviderProps) => JSX.Element;
Provides the values for the SelectRangeProvider.
function SelectRangeProviderInternal
SelectRangeProviderInternal: ({ initialProps, children,}: SelectRangeProviderInternalProps) => JSX.Element;
function SelectSingleProvider
SelectSingleProvider: (props: SelectSingleProviderProps) => JSX.Element;
Provides the values for the SelectSingleProvider.
function SelectSingleProviderInternal
SelectSingleProviderInternal: ({ initialProps, children,}: SelectSingleProviderInternal) => JSX.Element;
function useActiveModifiers
useActiveModifiers: (day: Date, displayMonth?: Date) => ActiveModifiers;
Return the active modifiers for the specified day.
This hook is meant to be used inside internal or custom components.
Parameter day
Parameter displayMonth
function useDayPicker
useDayPicker: () => DayPickerContextValue;
Hook to access the DayPickerContextValue.
Use the DayPicker context to access to the props passed to DayPicker inside internal or custom components.
function useDayRender
useDayRender: ( day: Date, displayMonth: Date, buttonRef: RefObject<HTMLButtonElement>) => DayRender;
Return props and data used to render the Day component.
Use this hook when creating a component to replace the built-in
Day
component.
function useFocusContext
useFocusContext: () => FocusContextValue;
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.
function useInput
useInput: (options?: UseInputOptions) => UseInputValue;
Return props and setters for binding an input field to DayPicker.
function useNavigation
useNavigation: () => NavigationContextValue;
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.
function useSelectMultiple
useSelectMultiple: () => SelectMultipleContextValue;
Hook to access the SelectMultipleContextValue.
This hook is meant to be used inside internal or custom components.
function useSelectRange
useSelectRange: () => SelectRangeContextValue;
Hook to access the SelectRangeContextValue.
This hook is meant to be used inside internal or custom components.
function useSelectSingle
useSelectSingle: () => SelectSingleContextValue;
Hook to access the SelectSingleContextValue.
This hook is meant to be used inside internal or custom components.
function WeekNumber
WeekNumber: (props: WeekNumberProps) => JSX.Element;
Render the week number element. If
onWeekNumberClick
is passed to DayPicker, it renders a button, otherwise a span element.
Interfaces
interface CaptionLabelProps
interface CaptionLabelProps {}
The props for the CaptionLabel component.
property displayIndex
displayIndex?: number | undefined;
The index of the month where the caption is displayed. Older custom components may miss this prop.
property displayMonth
displayMonth: Date;
The month where the caption is displayed.
property id
id?: string;
The ID for the heading element. Must be the same as the labelled-by in Table.
interface CaptionProps
interface CaptionProps {}
Represent the props of the Caption component.
property displayIndex
displayIndex?: number | undefined;
The index of the month where the caption is displayed. Older custom components may miss this prop.
property displayMonth
displayMonth: Date;
The month where the caption is displayed.
property id
id?: string;
The ID for the heading element. Must be the same as the labelled-by in Table.
interface CustomComponents
interface CustomComponents {}
Map of the components that can be changed using the
components
prop.See Also
https://github.com/gpbl/react-day-picker/tree/main/src/components
property Caption
Caption?: (props: CaptionProps) => JSX.Element | null;
The component for the caption element.
property CaptionLabel
CaptionLabel?: (props: CaptionLabelProps) => JSX.Element | null;
The component for the caption element.
property Day
Day?: (props: DayProps) => JSX.Element | null;
The component for the day element.
Each
Day
in DayPicker should render one of the following, according to the return value of useDayRender.- an empty
Fragment
, to render ifisHidden
is true - abutton
element, when the day is interactive, e.g. is selectable - adiv
or aspan
element, when the day is not interactive
property DayContent
DayContent?: (props: DayContentProps) => JSX.Element | null;
The component for the content of the day element.
property Dropdown
Dropdown?: (props: DropdownProps) => JSX.Element | null;
The component for the drop-down elements.
property Footer
Footer?: (props: FooterProps) => JSX.Element | null;
The component for the table footer.
property Head
Head?: () => JSX.Element | null;
The component for the table’s head.
property HeadRow
HeadRow?: () => JSX.Element | null;
The component for the table’s head row.
property IconDropdown
IconDropdown?: (props: StyledComponent) => JSX.Element | null;
The component for the small icon in the drop-downs.
property IconLeft
IconLeft?: (props: StyledComponent) => JSX.Element | null;
The arrow left icon (used for the Navigation buttons).
property IconRight
IconRight?: (props: StyledComponent) => JSX.Element | null;
The arrow right icon (used for the Navigation buttons).
property Months
Months?: (props: MonthsProps) => JSX.Element | null;
The component wrapping the month grids.
property Row
Row?: (props: RowProps) => JSX.Element | null;
The component for the table rows.
property WeekNumber
WeekNumber?: (props: WeekNumberProps) => JSX.Element | null;
The component for the week number in the table rows.
interface DayContentProps
interface DayContentProps {}
Represent the props for the DayContent component.
property activeModifiers
activeModifiers: ActiveModifiers;
The active modifiers for the given date.
property date
date: Date;
The date representing the day.
property displayMonth
displayMonth: Date;
The month where the day is displayed.
interface DayPickerBase
interface DayPickerBase {}
The base props for the DayPicker component and the DayPickerContext.
property captionLayout
captionLayout?: CaptionLayout;
Change the layout of the caption:
-
buttons
: display prev/right buttons -dropdown
: display drop-downs to change the month and the year**Note:** the
dropdown
layout is available only whenfromDate
,fromMonth
orfromYear
andtoDate
,toMonth
ortoYear
are set.
property className
className?: string;
The CSS class to add to the container element. To change the name of the class instead, use
classNames.root
.
property classNames
classNames?: ClassNames;
Change the class names of the HTML elements.
Use this prop when you need to change the default class names — for example when using CSS modules.
property components
components?: CustomComponents;
Map of components used to create the layout. Look at the [components source](https://github.com/gpbl/react-day-picker/tree/main/src/components) to understand how internal components are built and provide your custom components.
property defaultMonth
defaultMonth?: Date;
The initial month to show in the calendar. Use this prop to let DayPicker control the current month. If you need to set the month programmatically, use .
property dir
dir?: HTMLDivElement['dir'];
The text direction of the calendar. Use
ltr
for left-to-right (default) orrtl
for right-to-left.
property disabled
disabled?: Matcher | Matcher[] | undefined;
Apply the
disabled
modifier to the matching days.
property disableNavigation
disableNavigation?: boolean;
Disable the navigation between months.
property firstWeekContainsDate
firstWeekContainsDate?: 1 | 4;
The day of January, which is always in the first week of the year. Can be either Monday (
1
) or Thursday (4
).See Also
https://date-fns.org/docs/getWeek
https://en.wikipedia.org/wiki/Week#Numbering
property fixedWeeks
fixedWeeks?: boolean;
Display six weeks per months, regardless the month’s number of weeks. To use this prop, showOutsideDays must be set.
property footer
footer?: ReactNode;
Content to add to the table footer element.
property formatters
formatters?: Partial<Formatters>;
A map of formatters. Use the formatters to override the default formatting functions.
property fromDate
fromDate?: Date;
The earliest day to start the month navigation.
property fromMonth
fromMonth?: Date;
The earliest month to start the month navigation.
property fromYear
fromYear?: number;
The earliest year to start the month navigation.
property hidden
hidden?: Matcher | Matcher[] | undefined;
Apply the
hidden
modifier to the matching days. Will hide them from the calendar.
property hideHead
hideHead?: boolean;
Hide the month’s head displaying the weekday names.
property id
id?: string;
A unique id to replace the random generated id – used by DayPicker for accessibility.
property initialFocus
initialFocus?: boolean;
When a selection mode is set, DayPicker will focus the first selected day (if set) or the today's date (if not disabled).
Use this prop when you need to focus DayPicker after a user actions, for improved accessibility.
property ISOWeek
ISOWeek?: boolean;
Use ISO week dates instead of the locale setting. Setting this prop will ignore weekStartsOn and firstWeekContainsDate.
See Also
https://en.wikipedia.org/wiki/ISO_week_date
property labels
labels?: Partial<Labels>;
Labels creators to override the defaults. Use this prop to customize the ARIA labels attributes.
property lang
lang?: HTMLDivElement['lang'];
Add the language tag to the container element.
property locale
locale?: Locale;
The date-fns locale object used to localize dates.
property modifiers
modifiers?: DayModifiers;
Add modifiers to the matching days.
property modifiersClassNames
modifiersClassNames?: ModifiersClassNames;
Change the class name for the day matching the modifiers.
property modifiersStyles
modifiersStyles?: ModifiersStyles;
Change the inline style for the day matching the modifiers.
property month
month?: Date;
The month displayed in the calendar.
As opposed to DayPickerBase.defaultMonth, use this prop with DayPickerBase.onMonthChange to change the month programmatically.
property nonce
nonce?: HTMLDivElement['nonce'];
A cryptographic nonce ("number used once") which can be used by Content Security Policy for the inline
style
attributes.
property numberOfMonths
numberOfMonths?: number;
The number of displayed months.
property onDayBlur
onDayBlur?: DayFocusEventHandler;
Event callback fired when the user blurs from a day.
property onDayClick
onDayClick?: DayClickEventHandler;
Event callback fired when the user clicks on a day.
property onDayFocus
onDayFocus?: DayFocusEventHandler;
Event callback fired when the user focuses on a day.
property onDayKeyDown
onDayKeyDown?: DayKeyboardEventHandler;
Event callback fired when the user presses a key on a day.
property onDayKeyPress
onDayKeyPress?: DayKeyboardEventHandler;
Event callback fired when the user presses a key on a day.
property onDayKeyUp
onDayKeyUp?: DayKeyboardEventHandler;
Event callback fired when the user presses a key on a day.
property onDayMouseEnter
onDayMouseEnter?: DayMouseEventHandler;
Event callback fired when the user hovers on a day.
property onDayMouseLeave
onDayMouseLeave?: DayMouseEventHandler;
Event callback fired when the user hovers away from a day.
property onDayPointerEnter
onDayPointerEnter?: DayPointerEventHandler;
Event callback fired when the pointer enters a day.
property onDayPointerLeave
onDayPointerLeave?: DayPointerEventHandler;
Event callback fired when the pointer leaves a day.
property onDayTouchCancel
onDayTouchCancel?: DayTouchEventHandler;
Event callback when a day touch event is canceled.
property onDayTouchEnd
onDayTouchEnd?: DayTouchEventHandler;
Event callback when a day touch event ends.
property onDayTouchMove
onDayTouchMove?: DayTouchEventHandler;
Event callback when a day touch event moves.
property onDayTouchStart
onDayTouchStart?: DayTouchEventHandler;
Event callback when a day touch event starts.
property onMonthChange
onMonthChange?: MonthChangeEventHandler;
Event fired when the user navigates between months.
property onNextClick
onNextClick?: MonthChangeEventHandler;
Event callback fired when the next month button is clicked.
property onPrevClick
onPrevClick?: MonthChangeEventHandler;
Event callback fired when the previous month button is clicked.
property onWeekNumberClick
onWeekNumberClick?: WeekNumberClickEventHandler;
Event callback fired when the week number is clicked. Requires
showWeekNumbers
set.
property pagedNavigation
pagedNavigation?: boolean;
Paginate the month navigation displaying the numberOfMonths at time.
property reverseMonths
reverseMonths?: boolean;
Render the months in reversed order (when numberOfMonths is greater than
1
) to display the most recent month first.
property selected
selected?: Matcher | Matcher[] | undefined;
Apply the
selected
modifier to the matching days.
property showOutsideDays
showOutsideDays?: boolean;
Show the outside days. An outside day is a day falling in the next or the previous month.
property showWeekNumber
showWeekNumber?: boolean;
Show the week numbers column. Weeks are numbered according to the local week index.
- to use ISO week numbering, use the ISOWeek prop. - to change how the week numbers are displayed, use the Formatters prop.
See Also
property style
style?: CSSProperties;
Style to apply to the container element.
property styles
styles?: Styles;
Change the inline styles of the HTML elements.
property title
title?: HTMLDivElement['title'];
Add a
title
attribute to the container element.
property toDate
toDate?: Date;
The latest day to end the month navigation.
property today
today?: Date;
The today’s date. Default is the current date. This Date will get the
today
modifier to style the day.
property toMonth
toMonth?: Date;
The latest month to end the month navigation.
property toYear
toYear?: number;
The latest year to end the month navigation.
property weekStartsOn
weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
The index of the first day of the week (0 - Sunday). Overrides the locale's one.
See Also
interface DayPickerContextValue
interface DayPickerContextValue extends DayPickerBase {}
The value of the DayPickerContext extends the props from DayPicker with default and cleaned up values.
property captionLayout
captionLayout: CaptionLayout;
property classNames
classNames: Required<ClassNames>;
property formatters
formatters: Formatters;
property labels
labels: Labels;
property locale
locale: Locale;
property max
max?: number;
property min
min?: number;
property mode
mode: DaySelectionMode;
property modifiers
modifiers: DayModifiers;
property modifiersClassNames
modifiersClassNames: ModifiersClassNames;
property numberOfMonths
numberOfMonths: number;
property onSelect
onSelect?: | DayPickerSingleProps['onSelect'] | DayPickerMultipleProps['onSelect'] | DayPickerRangeProps['onSelect'];
property required
required?: boolean;
property selected
selected?: Matcher | Matcher[];
property styles
styles: Styles;
property today
today: Date;
interface DayPickerDefaultProps
interface DayPickerDefaultProps extends DayPickerBase {}
The props for the DayPicker component when using
mode="default"
orundefined
.
property mode
mode?: undefined | 'default';
interface DayPickerMultipleProps
interface DayPickerMultipleProps extends DayPickerBase {}
The props for the DayPicker component when using
mode="multiple"
.
property max
max?: number;
The maximum amount of days that can be selected.
property min
min?: number;
The minimum amount of days that can be selected.
property mode
mode: 'multiple';
property onSelect
onSelect?: SelectMultipleEventHandler;
Event fired when a days added or removed to the selection.
property selected
selected?: Date[] | undefined;
The selected days.
interface DayPickerProviderProps
interface DayPickerProviderProps {}
The props for the DayPickerProvider.
property children
children?: ReactNode;
property initialProps
initialProps: DayPickerProps;
The initial props from the DayPicker component.
interface DayPickerRangeProps
interface DayPickerRangeProps extends DayPickerBase {}
The props for the DayPicker component when using
mode="range"
.
property max
max?: number;
The maximum amount of days that can be selected.
property min
min?: number;
The minimum amount of days that can be selected.
property mode
mode: 'range';
property onSelect
onSelect?: SelectRangeEventHandler;
Event fired when a range (or a part of the range) is selected.
property selected
selected?: DateRange | undefined;
The selected range of days.
interface DayPickerSingleProps
interface DayPickerSingleProps extends DayPickerBase {}
The props for the DayPicker component when using
mode="single"
.
interface DayProps
interface DayProps {}
Represent the props used by the Day component.
property date
date: Date;
The date to render.
property displayMonth
displayMonth: Date;
The month where the date is displayed.
interface DropdownProps
interface DropdownProps {}
The props for the Dropdown component.
property ['aria-label']
['aria-label']?: string;
property caption
caption?: ReactNode;
The caption displayed to replace the hidden select.
property children
children?: SelectHTMLAttributes<HTMLSelectElement>['children'];
property className
className?: string;
property name
name?: string;
The name attribute of the element.
property onChange
onChange?: ChangeEventHandler<HTMLSelectElement>;
property style
style?: CSSProperties;
property value
value?: string | number;
The selected value.
interface FooterProps
interface FooterProps {}
property displayMonth
displayMonth?: Date;
The month where the footer is displayed.
interface NavigationContextValue
interface NavigationContextValue {}
Represents the value of the NavigationContext.
property currentMonth
currentMonth: Date;
The month to display in the calendar. When
numberOfMonths
is greater than one, is the first of the displayed months.
property displayMonths
displayMonths: Date[];
The months rendered by DayPicker. DayPicker can render multiple months via
numberOfMonths
.
property goToDate
goToDate: (date: Date, refDate?: Date) => void;
Navigate to the specified date.
property goToMonth
goToMonth: (month: Date) => void;
Navigate to the specified month.
property isDateDisplayed
isDateDisplayed: (day: Date) => boolean;
Whether the given day is included in the displayed months.
property nextMonth
nextMonth?: Date;
The next month to display.
property previousMonth
previousMonth?: Date;
The previous month to display.
interface RootContext
interface RootContext {}
The props of RootProvider.
property children
children?: ReactNode;
interface RowProps
interface RowProps {}
The props for the Row component.
property dates
dates: Date[];
The days contained in the week.
property displayMonth
displayMonth: Date;
The month where the row is displayed.
property weekNumber
weekNumber: number;
The number of the week to render.
interface SelectMultipleContextValue
interface SelectMultipleContextValue {}
Represents the value of a SelectMultipleContext.
property modifiers
modifiers: SelectMultipleModifiers;
The modifiers for the corresponding selection.
property onDayClick
onDayClick?: DayClickEventHandler;
Event handler to attach to the day button to enable the multiple select.
property selected
selected: Date[] | undefined;
The days that have been selected.
interface SelectMultipleProviderInternalProps
interface SelectMultipleProviderInternalProps {}
property children
children?: ReactNode;
property initialProps
initialProps: DayPickerMultipleProps;
interface SelectRangeContextValue
interface SelectRangeContextValue {}
Represents the value of a SelectRangeContext.
property modifiers
modifiers: SelectRangeModifiers;
The modifiers for the corresponding selection.
property onDayClick
onDayClick?: DayClickEventHandler;
Event handler to attach to the day button to enable the range select.
property selected
selected: DateRange | undefined;
The range of days that has been selected.
interface SelectRangeProviderInternalProps
interface SelectRangeProviderInternalProps {}
property children
children?: ReactNode;
property initialProps
initialProps: DayPickerRangeProps;
interface SelectRangeProviderProps
interface SelectRangeProviderProps {}
property children
children?: ReactNode;
property initialProps
initialProps: DayPickerBase;
interface SelectSingleContextValue
interface SelectSingleContextValue {}
Represents the value of a SelectSingleContext.
property onDayClick
onDayClick?: DayClickEventHandler;
Event handler to attach to the day button to enable the single select.
property selected
selected: Date | undefined;
The day that has been selected.
interface SelectSingleProviderInternal
interface SelectSingleProviderInternal {}
property children
children?: ReactNode;
property initialProps
initialProps: DayPickerSingleProps;
interface SelectSingleProviderProps
interface SelectSingleProviderProps {}
property children
children?: ReactNode;
property initialProps
initialProps: DayPickerBase;
interface UseInputOptions
interface UseInputOptions extends Pick< DayPickerBase, | 'locale' | 'fromDate' | 'toDate' | 'fromMonth' | 'toMonth' | 'fromYear' | 'toYear' | 'today' > {}
property defaultSelected
defaultSelected?: Date;
The initially selected date
property format
format?: string;
The format string for formatting the input field. See https://date-fns.org/docs/format for a list of format strings.
property required
required?: boolean;
Make the selection required.
interface UseInputValue
interface UseInputValue {}
Represent the value returned by useInput.
property dayPickerProps
dayPickerProps: InputDayPickerProps;
The props to pass to a DayPicker component.
property inputProps
inputProps: InputProps;
The props to pass to an input field.
property reset
reset: () => void;
A function to reset to the initial state.
property setSelected
setSelected: (day: Date | undefined) => void;
A function to set the selected day.
interface WeekNumberProps
interface WeekNumberProps {}
The props for the WeekNumber component.
Enums
enum InternalModifier
enum InternalModifier { Outside = 'outside', Disabled = 'disabled', Selected = 'selected', Hidden = 'hidden', Today = 'today', RangeStart = 'range_start', RangeEnd = 'range_end', RangeMiddle = 'range_middle',}
The name of the modifiers that are used internally by DayPicker.
member Disabled
Disabled = 'disabled'
Name of the modifier applied to the disabled days, using the
disabled
prop.
member Hidden
Hidden = 'hidden'
Name of the modifier applied to the hidden days using the
hidden
prop).
member Outside
Outside = 'outside'
member RangeEnd
RangeEnd = 'range_end'
The modifier applied to the day ending a selected range, when in range selection mode.
member RangeMiddle
RangeMiddle = 'range_middle'
The modifier applied to the days between the start and the end of a selected range, when in range selection mode.
member RangeStart
RangeStart = 'range_start'
The modifier applied to the day starting a selected range, when in range selection mode.
member Selected
Selected = 'selected'
Name of the modifier applied to the selected days using the
selected
prop).
member Today
Today = 'today'
Name of the modifier applied to the day specified using the
today
prop).
Type Aliases
type ActiveModifiers
type ActiveModifiers = Record<Modifier, true> & Partial<Record<InternalModifier, true>>;
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}
type ButtonProps
type ButtonProps = JSX.IntrinsicElements['button'];
The props for the Button component.
type CaptionLayout
type CaptionLayout = 'dropdown' | 'buttons' | 'dropdown-buttons';
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.
type ClassNames
type ClassNames = Partial<StyledElement<string>>;
The class names of each element.
type CustomModifiers
type CustomModifiers = Record<Modifier, Matcher[]>;
A map of matchers used as custom modifiers by DayPicker component. This is the same as s.
type DateAfter
type DateAfter = { after: Date;};
A matcher to match a day falling after the specified date, with the date not included.
type DateBefore
type DateBefore = { before: Date;};
A matcher to match a day falling before the specified date, with the date not included.
type DateFormatter
type DateFormatter = ( date: Date, options?: { locale?: Locale; }) => ReactNode;
Represents a function to format a date.
type DateInterval
type DateInterval = { before: Date; after: Date;};
A matcher to match a day falling before and/or after two dates, where the dates are not included.
type DateRange
type DateRange = { from: Date | undefined; to?: Date | undefined;};
A matcher to match a range of dates. The range can be open. Differently from DateInterval, the dates here are included.
type DayClickEventHandler
type DayClickEventHandler = ( day: Date, activeModifiers: ActiveModifiers, e: MouseEvent) => void;
The event handler when a day is clicked.
type DayFocusEventHandler
type DayFocusEventHandler = ( day: Date, activeModifiers: ActiveModifiers, e: FocusEvent | KeyboardEvent) => void;
The event handler when a day is focused.
type DayKeyboardEventHandler
type DayKeyboardEventHandler = ( day: Date, activeModifiers: ActiveModifiers, e: KeyboardEvent) => void;
The event handler when a day gets a keyboard event.
type DayLabel
type DayLabel = ( day: Date, activeModifiers: ActiveModifiers, options?: { locale?: Locale; }) => string;
Return the ARIA label for the Day component.
type DayModifiers
type DayModifiers = Record<Modifier, Matcher | Matcher[]>;
The custom modifiers passed to the DayPickerBase.modifiers.
type DayMouseEventHandler
type DayMouseEventHandler = ( day: Date, activeModifiers: ActiveModifiers, e: MouseEvent) => void;
The event handler when a day gets a mouse event.
type DayOfWeek
type DayOfWeek = { dayOfWeek: number[];};
A matcher to match a date being one of the specified days of the week (
0-6
, where0
is Sunday).
type DayPickerProps
type DayPickerProps = | DayPickerDefaultProps | DayPickerSingleProps | DayPickerMultipleProps | DayPickerRangeProps;
type DayPointerEventHandler
type DayPointerEventHandler = ( day: Date, activeModifiers: ActiveModifiers, e: PointerEvent) => void;
The event handler when a day gets a pointer event.
type DayRender
type DayRender = { /** Whether the day should be rendered a `button` instead of a `div` */ isButton: boolean; /** Whether the day should be hidden. */ isHidden: boolean; /** The modifiers active for the given day. */ activeModifiers: ActiveModifiers; /** The props to apply to the button element (when `isButton` is true). */ buttonProps: StyledComponent & Pick<ButtonProps, 'disabled' | 'aria-selected' | 'tabIndex'> & DayEventHandlers; /** The props to apply to the div element (when `isButton` is false). */ divProps: StyledComponent; selectedDays: SelectedDays;};
type DaySelectionMode
type DaySelectionMode = 'single' | 'multiple' | 'range' | 'default';
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 is selected by using DayPickerBase.onDayClick.
type DayTouchEventHandler
type DayTouchEventHandler = ( day: Date, activeModifiers: ActiveModifiers, e: TouchEvent) => void;
The event handler when a day gets a touch event.
type FocusContextValue
type FocusContextValue = { /** The day currently focused. */ focusedDay: Date | undefined; /** Day that will be focused. */ focusTarget: Date | undefined; /** Focus a day. */ focus: (day: Date) => void; /** Blur the focused day. */ blur: () => void; /** Focus the day after the focused day. */ focusDayAfter: () => void; /** Focus the day before the focused day. */ focusDayBefore: () => void; /** Focus the day in the week before the focused day. */ focusWeekBefore: () => void; /** Focus the day in the week after the focused day. */ focusWeekAfter: () => void; focusMonthBefore: () => void; focusMonthAfter: () => void; focusYearBefore: () => void; focusYearAfter: () => void; focusStartOfWeek: () => void; focusEndOfWeek: () => void;};
Represents the value of the FocusContext.
type FocusProviderProps
type FocusProviderProps = { children: ReactNode;};
type Formatters
type Formatters = { /** Format the month in the caption when `captionLayout` is `buttons`. */ formatCaption: DateFormatter; /** Format the month in the navigation dropdown. */ formatMonthCaption: DateFormatter; /** Format the year in the navigation dropdown. */ formatYearCaption: DateFormatter; /** Format the day in the day cell. */ formatDay: DateFormatter; /** Format the week number. */ formatWeekNumber: WeekNumberFormatter; /** Format the week day name in the header */ formatWeekdayName: DateFormatter;};
Represent a map of formatters used to render localized content.
type InputDayPickerProps
type InputDayPickerProps = Pick< DayPickerSingleProps, | 'fromDate' | 'toDate' | 'locale' | 'month' | 'onDayClick' | 'onMonthChange' | 'selected' | 'today'>;
The props to attach to the DayPicker component when using useInput.
type InputProps
type InputProps = Pick< InputHTMLAttributes<HTMLInputElement>, 'onBlur' | 'onChange' | 'onFocus' | 'value' | 'placeholder'>;
The props to attach to the input field when using useInput.
type InternalModifiers
type InternalModifiers = Record<InternalModifier, Matcher[]>;
Map of matchers used for the internal modifiers.
type InternalModifiersElement
type InternalModifiersElement = | 'day_outside' | 'day_selected' | 'day_disabled' | 'day_hidden' | 'day_range_start' | 'day_range_end' | 'day_range_middle' | 'day_today';
These elements must not be in the
styles
orclassNames
records as they are styled via themodifiersStyles
ormodifiersClassNames
pop
type Labels
type Labels = { labelMonthDropdown: () => string; labelYearDropdown: () => string; labelNext: NavButtonLabel; labelPrevious: NavButtonLabel; /** @deprecated This label is not used anymore and this function will be removed in the future. */ labelDay: DayLabel; labelWeekday: WeekdayLabel; labelWeekNumber: WeekNumberLabel;};
Map of functions to translate ARIA labels for the relative elements.
type Matcher
type Matcher = | boolean | ((date: Date) => boolean) | Date | Date[] | DateRange | DateBefore | DateAfter | DateInterval | DayOfWeek;
A value or a function that matches a specific day.
Matchers are passed to DayPicker via DayPickerBase.disabled, and are used to determine if a day should get a Modifier.
Matchers can be of different types:
// will always match the dayconst booleanMatcher: Matcher = true;// will match the today's dateconst dateMatcher: Matcher = new Date();// will match the days in the arrayconst arrayMatcher: Matcher = [new Date(2019, 1, 2), new Date(2019, 1, 4)];// will match days after the 2nd of February 2019const 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 Sundaysconst dayOfWeekMatcher: DayOfWeek = {dayOfWeek: 0};// will match the included days, except the two datesconst intervalMatcher: DateInterval = {after: new Date(2019, 1, 2),before: new Date(2019, 1, 5)};// will match the included days, including the two datesconst rangeMatcher: DateRange = {from: new Date(2019, 1, 2),to: new Date(2019, 1, 5)};// will match when the function return trueconst functionMatcher: Matcher = (day: Date) => {return day.getMonth() === 2 // match when month is March};See Also
type Modifier
type Modifier = string;
A _modifier_ represents different styles or states of a day displayed in the calendar.
type Modifiers
type Modifiers = CustomModifiers & InternalModifiers;
The modifiers used by DayPicker.
type ModifiersClassNames
type ModifiersClassNames = Record<Modifier, string> & Partial<Record<InternalModifier, string>>;
The classnames to assign to each day element matching a modifier.
type ModifiersStyles
type ModifiersStyles = Record<Modifier, CSSProperties> & Partial<Record<InternalModifier, CSSProperties>>;
The style to apply to each day element matching a modifier.
type MonthChangeEventHandler
type MonthChangeEventHandler = (month: Date) => void;
The event handler when a month is changed in the calendar.
type MonthsProps
type MonthsProps = { children: ReactNode;};
The props for the Months component.
type NavButtonLabel
type NavButtonLabel = ( month?: Date, options?: { locale?: Locale; }) => string;
Return the ARIA label for the "next month" / "prev month" buttons in the navigation.
type SelectMultipleEventHandler
type SelectMultipleEventHandler = ( /** The selected days */ days: Date[] | undefined, /** The day that was clicked triggering the event. */ selectedDay: Date, /** The day that was clicked */ activeModifiers: ActiveModifiers, /** The mouse event that triggered this event. */ e: MouseEvent) => void;
The event handler when selecting multiple days.
type SelectMultipleModifiers
type SelectMultipleModifiers = Pick<Modifiers, InternalModifier.Disabled>;
Represent the modifiers that are changed by the multiple selection.
type SelectMultipleProviderProps
type SelectMultipleProviderProps = { initialProps: DayPickerBase; children?: ReactNode;};
type SelectRangeEventHandler
type SelectRangeEventHandler = ( /** The current range of the selected days. */ range: DateRange | undefined, /** The day that was selected (or clicked) triggering the event. */ selectedDay: Date, /** The modifiers of the selected day. */ activeModifiers: ActiveModifiers, e: MouseEvent) => void;
The event handler when selecting a range of days.
type SelectRangeModifiers
type SelectRangeModifiers = Pick< Modifiers, | InternalModifier.Disabled | InternalModifier.RangeEnd | InternalModifier.RangeMiddle | InternalModifier.RangeStart>;
Represent the modifiers that are changed by the range selection.
type SelectSingleEventHandler
type SelectSingleEventHandler = ( /** The selected day, `undefined` when `required={false}` (default) and the day is clicked again. */ day: Date | undefined, /** The day that was selected (or clicked) triggering the event. */ selectedDay: Date, /** The modifiers of the selected day. */ activeModifiers: ActiveModifiers, e: MouseEvent) => void;
The event handler when selecting a single day.
type StyledComponent
type StyledComponent = { className?: string; style?: CSSProperties; children?: ReactNode;};
Props of a component that can be styled via classNames or inline-styles.
type StyledElement
type StyledElement<T = string | CSSProperties> = { /** The root element. */ readonly root: T; /** The root element when `numberOfMonths > 1`. */ readonly multiple_months: T; /** The root element when `showWeekNumber={true}`. */ readonly with_weeknumber: T; /** The style of an element visually hidden. */ readonly vhidden: T; /** The style for resetting the buttons. */ readonly button_reset: T; /** The buttons. */ readonly button: T; /** The caption (showing the calendar heading and the navigation) */ readonly caption: T; /** The caption when at the start of a series of months. */ readonly caption_start: T; /** The caption when at the end of a series of months. */ readonly caption_end: T; /** The caption when between two months (when `multipleMonths > 2`). */ readonly caption_between: T; /** The caption label. */ readonly caption_label: T; /** The drop-downs container. */ readonly caption_dropdowns: T; /** The drop-down (select) element. */ readonly dropdown: T; /** The drop-down to change the month. */ readonly dropdown_month: T; /** The drop-down to change the year. */ readonly dropdown_year: T; /** The drop-down icon. */ readonly dropdown_icon: T; /** The months wrapper. */ readonly months: T; /** The table wrapper. */ readonly month: T; /** Table containing the monthly calendar. */ readonly table: T; /** The table body. */ readonly tbody: T; /** The table footer. */ readonly tfoot: T; /** The table’s head. */ readonly head: T; /** The row in the head. */ readonly head_row: T; /** The head cell. */ readonly head_cell: T; /** The navigation container. */ readonly nav: T; /** The navigation button. */ readonly nav_button: T; /** The "previous month" navigation button. */ readonly nav_button_previous: T; /** The "next month" navigation button. */ readonly nav_button_next: T; /** The icon for the navigation button. */ readonly nav_icon: T; /** The table’s row. */ readonly row: T; /** The weeknumber displayed in the column. */ readonly weeknumber: T; /** The table cell containing the day element. */ readonly cell: T; /** The day element: it is a `span` when not interactive, a `button` otherwise. */ readonly day: T; /** The day when outside the month. */ readonly day_outside: T; /** The day when selected. */ readonly day_selected: T; /** The day when disabled. */ readonly day_disabled: T; /** The day when hidden. */ readonly day_hidden: T; /** The day when at the start of a selected range. */ readonly day_range_start: T; /** The day when at the end of a selected range. */ readonly day_range_end: T; /** The day in the middle of a selected range: it does not include the "from" and the "to" days. */ readonly day_range_middle: T; /** The day when today. */ readonly day_today: T;};
The style (either via class names or via in-line styles) of an element.
type Styles
type Styles = Partial<Omit<StyledElement<CSSProperties>, InternalModifiersElement>>;
The inline-styles of each styled element, to use with the
styles
prop. Day modifiers, such astoday
orhidden
, should be styled using themodifiersStyles
prop.
type WeekdayLabel
type WeekdayLabel = ( day: Date, options?: { locale?: Locale; }) => string;
Return the ARIA label for the Head component.
type WeekNumberClickEventHandler
type WeekNumberClickEventHandler = ( /** The week number that has been clicked. */ weekNumber: number, /** The dates in the clicked week. */ dates: Date[], /** The mouse event that triggered this event. */ e: MouseEvent) => void;
The event handler when the week number is clicked.
type WeekNumberFormatter
type WeekNumberFormatter = ( weekNumber: number, options?: { locale?: Locale; }) => ReactNode;
Represent a function to format the week number.
type WeekNumberLabel
type WeekNumberLabel = ( n: number, options?: { locale?: Locale; }) => string;
Return the ARIA label of the week number.
Package Files (1)
Dependencies (0)
No dependencies.
Dev Dependencies (45)
- @jest/types
- @rollup/plugin-commonjs
- @rollup/plugin-node-resolve
- @rollup/plugin-terser
- @rollup/plugin-typescript
- @testing-library/dom
- @testing-library/jest-dom
- @testing-library/react
- @testing-library/user-event
- @types/jest
- @types/node
- @types/react
- @types/react-dom
- @types/testing-library__jest-dom
- @typescript-eslint/eslint-plugin
- @typescript-eslint/parser
- date-fns
- eslint
- eslint-config-prettier
- eslint-import-resolver-typescript
- eslint-plugin-import
- eslint-plugin-jest
- eslint-plugin-prettier
- eslint-plugin-react-hooks
- eslint-plugin-testing-library
- jest
- jest-environment-jsdom
- mockdate
- postcss
- postcss-d-ts
- postcss-typescript-d-ts
- prettier
- react
- react-classnaming
- react-dom
- rimraf
- rollup
- rollup-plugin-copy
- rollup-plugin-dts
- rollup-plugin-postcss
- ts-jest
- ts-node
- tsc-alias
- tslib
- typescript
Peer Dependencies (2)
Badge
To add a badge like this oneto your package's README, use the codes available below.
You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/react-day-picker
.
- Markdown[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/react-day-picker)
- HTML<a href="https://www.jsdocs.io/package/react-day-picker"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>
- Updated .
Package analyzed in 7785 ms. - Missing or incorrect documentation? Open an issue for this package.