Interface: DayPickerBase
The base props for the DayPicker component.
Hierarchyβ
DayPickerBase
Propertiesβ
captionLayoutβ
β’ Optional
captionLayout: CaptionLayout
Change the layout of the caption:
buttons
(default): display prev/right buttonsdropdown
: display drop-downs to change the month and the year
Note: the dropdown
layout is available only when fromDate
,
fromMonth
orfromYear
and toDate
, toMonth
or toYear
are set.
Defined inβ
classNameβ
β’ Optional
className: string
The CSS class to add to the container element.
Defined inβ
classNamesβ
β’ Optional
classNames: Partial
<StyledElement
<string
>>
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.
Defined inβ
componentsβ
β’ Optional
components: CustomComponents
A map of components used to create the layout.
Defined inβ
defaultMonthβ
β’ Optional
defaultMonth: Date
The initial month to show in the calendar. Default is the current month.
Use this prop to let DayPicker control the current month. If you need to set the month programmatically, use month and onMonthChange.
Defined inβ
dirβ
β’ Optional
dir: string
The text direction of the calendar. Use ltr
for left-to-right (default)
or rtl
for right-to-left.
Defined inβ
disableNavigationβ
β’ Optional
disableNavigation: boolean
Disable the navigation between months.
Defined inβ
disabledβ
β’ Optional
disabled: Matcher
| Matcher
[]
Apply the disabled
modifier to the matching days.
Defined inβ
fixedWeeksβ
β’ Optional
fixedWeeks: boolean
Display six weeks per months, regardless the monthβs number of weeks.
To use this prop, showOutsideDays must be set. Default to false
.
Defined inβ
footerβ
β’ Optional
footer: ReactNode
Content to add to the tfoot
element.
Defined inβ
formattersβ
β’ Optional
formatters: Partial
<Formatters
>
A map of formatters. Use the formatters to override the default formatting functions.
Defined inβ
fromDateβ
β’ Optional
fromDate: Date
The earliest day to start the month navigation.
Defined inβ
fromMonthβ
β’ Optional
fromMonth: Date
The earliest month to start the month navigation.
Defined inβ
fromYearβ
β’ Optional
fromYear: number
The earliest year to start the month navigation.
Defined inβ
hiddenβ
β’ Optional
hidden: Matcher
| Matcher
[]
Apply the hidden
modifier to the matching days. Will hide them from the
calendar.
Defined inβ
hideHeadβ
β’ Optional
hideHead: boolean
Hide the monthβs head displaying the weekday names.
Defined inβ
initialFocusβ
β’ Optional
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.
Defined inβ
labelsβ
β’ Optional
labels: Partial
<Labels
>
Labels creators to override the defaults. Use this prop to customize the ARIA labels attributes.
Defined inβ
localeβ
β’ Optional
locale: Locale
The date-fns locale object used to localize dates. Defaults to* en-US
.
Defined inβ
modifiersβ
β’ Optional
modifiers: DayModifiers
Add modifiers to the matching days.
Defined inβ
modifiersClassNamesβ
β’ Optional
modifiersClassNames: ModifiersClassNames
Change the class name for the day matching the modifiers.
Defined inβ
modifiersStylesβ
β’ Optional
modifiersStyles: ModifiersStyles
Change the inline style for the day matching the modifiers.
Defined inβ
monthβ
β’ Optional
month: Date
The month to display in the calendar.
As opposed to defaultMonth, use this prop with onMonthChange to change the month programmatically.
Defined inβ
numberOfMonthsβ
β’ Optional
numberOfMonths: number
The number of displayed months. Defaults to 1
.
Defined inβ
onDayBlurβ
β’ Optional
onDayBlur: DayFocusEventHandler
Defined inβ
onDayClickβ
β’ Optional
onDayClick: DayClickEventHandler
Defined inβ
onDayFocusβ
β’ Optional
onDayFocus: DayFocusEventHandler
Defined inβ
onDayKeyDownβ
β’ Optional
onDayKeyDown: DayKeyboardEventHandler
Defined inβ
onDayKeyPressβ
β’ Optional
onDayKeyPress: DayKeyboardEventHandler
Defined inβ
onDayKeyUpβ
β’ Optional
onDayKeyUp: DayKeyboardEventHandler
Defined inβ
onDayMouseEnterβ
β’ Optional
onDayMouseEnter: DayMouseEventHandler
Defined inβ
onDayMouseLeaveβ
β’ Optional
onDayMouseLeave: DayMouseEventHandler
Defined inβ
onDayTouchCancelβ
β’ Optional
onDayTouchCancel: DayTouchEventHandler
Defined inβ
onDayTouchEndβ
β’ Optional
onDayTouchEnd: DayTouchEventHandler
Defined inβ
onDayTouchMoveβ
β’ Optional
onDayTouchMove: DayTouchEventHandler
Defined inβ
onDayTouchStartβ
β’ Optional
onDayTouchStart: DayTouchEventHandler
Defined inβ
onMonthChangeβ
β’ Optional
onMonthChange: MonthChangeEventHandler
Event fired when the user navigates between months.
Defined inβ
onNextClickβ
β’ Optional
onNextClick: MonthChangeEventHandler
Defined inβ
onPrevClickβ
β’ Optional
onPrevClick: MonthChangeEventHandler
Defined inβ
onWeekNumberClickβ
β’ Optional
onWeekNumberClick: WeekNumberClickEventHandler
Defined inβ
pagedNavigationβ
β’ Optional
pagedNavigation: boolean
Paginate the month navigation displaying the numberOfMonths at time.
Defined inβ
reverseMonthsβ
β’ Optional
reverseMonths: boolean
Render the months in reversed order (when numberOfMonths is greater
than 1
) to display the most recent month first.
Defined inβ
selectedβ
β’ Optional
selected: Matcher
| Matcher
[]
Apply the selected
modifier to the matching days.
Defined inβ
showOutsideDaysβ
β’ Optional
showOutsideDays: boolean
Show the outside days. An outside day is a day falling in the next or the
previous month. Default is false
.
Defined inβ
showWeekNumberβ
β’ Optional
showWeekNumber: boolean
Show the week numbers column. Default to false
.
Defined inβ
styleβ
β’ Optional
style: CSSProperties
Style to apply to the container element.
Defined inβ
stylesβ
β’ Optional
styles: Partial
<Omit
<StyledElement
<CSSProperties
>, InternalModifiersElement
>>
Change the inline styles for each UIElement.
Defined inβ
toDateβ
β’ Optional
toDate: Date
The latest day to end the month navigation.
Defined inβ
toMonthβ
β’ Optional
toMonth: Date
The latest month to end the month navigation.
Defined inβ
toYearβ
β’ Optional
toYear: number
The latest year to end the month navigation.
Defined inβ
todayβ
β’ Optional
today: Date
The todayβs date. Default is the current date. This Date will get the
today
modifier to style the day.
Defined inβ
weekStartsOnβ
β’ Optional
weekStartsOn: 0
| 1
| 2
| 3
| 4
| 5
| 6
The index of the first day of the week (0 - Sunday). Overrides the locale's one.