Interface: DayPickerBase
The base props for the DayPicker component and the DayPickerContext.
Hierarchyβ
DayPickerBase
Propertiesβ
ISOWeekβ
β’ Optional
ISOWeek: boolean
Use ISO week dates instead of the locale setting. See also https://en.wikipedia.org/wiki/ISO_week_date.
Setting this prop will ignore weekStartsOn and firstWeekContainsDate.
Defined inβ
packages/react-day-picker/src/types/DayPickerBase.ts:208
captionLayoutβ
β’ Optional
captionLayout: CaptionLayout
Change the layout of the caption:
buttons
: 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.
Default Value
buttons
Defined inβ
packages/react-day-picker/src/types/DayPickerBase.ts:164
classNameβ
β’ Optional
className: string
The CSS class to add to the container element. To change the name of the
class instead, use classNames.root
.
Defined inβ
packages/react-day-picker/src/types/DayPickerBase.ts:51
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β
packages/react-day-picker/src/types/DayPickerBase.ts:58
componentsβ
β’ Optional
components: CustomComponents
Map of components used to create the layout. Look at the components source to understand how internal components are built and provide your custom components.
Defined inβ
packages/react-day-picker/src/types/DayPickerBase.ts:215
defaultMonthβ
β’ Optional
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 []] and [onMonthChange.
Default Value
The current month
Defined inβ
packages/react-day-picker/src/types/DayPickerBase.ts:90
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β
packages/react-day-picker/src/types/DayPickerBase.ts:273
disableNavigationβ
β’ Optional
disableNavigation: boolean
Disable the navigation between months.
Default Value
false
Defined inβ
packages/react-day-picker/src/types/DayPickerBase.ts:137
disabledβ
β’ Optional
disabled: Matcher
| Matcher
[]
Apply the disabled
modifier to the matching days.
Defined inβ
packages/react-day-picker/src/types/DayPickerBase.ts:234
firstWeekContainsDateβ
β’ Optional
firstWeekContainsDate: 1
| 2
| 3
| 4
| 5
| 6
| 7
The day of January, which is always in the first week of the year. See also https://date-fns.org/docs/getWeek and https://en.wikipedia.org/wiki/Week#Numbering
Defined inβ
packages/react-day-picker/src/types/DayPickerBase.ts:201
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 Value
false
Defined inβ
packages/react-day-picker/src/types/DayPickerBase.ts:171
footerβ
β’ Optional
footer: ReactNode
Content to add to the table footer element.
Defined inβ
packages/react-day-picker/src/types/DayPickerBase.ts:220
formattersβ
β’ Optional
formatters: Partial
<Formatters
>
A map of formatters. Use the formatters to override the default formatting functions.
Defined inβ
packages/react-day-picker/src/types/DayPickerBase.ts:279
fromDateβ
β’ Optional
fromDate: Date
The earliest day to start the month navigation.
Defined inβ
packages/react-day-picker/src/types/DayPickerBase.ts:111
fromMonthβ
β’ Optional
fromMonth: Date
The earliest month to start the month navigation.
Defined inβ
packages/react-day-picker/src/types/DayPickerBase.ts:119
fromYearβ
β’ Optional
fromYear: number
The earliest year to start the month navigation.
Defined inβ
packages/react-day-picker/src/types/DayPickerBase.ts:127
hiddenβ
β’ Optional
hidden: Matcher
| Matcher
[]
Apply the hidden
modifier to the matching days. Will hide them from the
calendar.
Defined inβ
packages/react-day-picker/src/types/DayPickerBase.ts:239
hideHeadβ
β’ Optional
hideHead: boolean
Hide the monthβs head displaying the weekday names.
Default Value
false
Defined inβ
packages/react-day-picker/src/types/DayPickerBase.ts:177
idβ
β’ Optional
id: string
A unique id to replace the random generated id β used by DayPicker for accessibility.
Defined inβ
packages/react-day-picker/src/types/DayPickerBase.ts:81
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β
packages/react-day-picker/src/types/DayPickerBase.ts:229
labelsβ
β’ Optional
labels: Partial
<Labels
>
Labels creators to override the defaults. Use this prop to customize the ARIA labels attributes.
Defined inβ
packages/react-day-picker/src/types/DayPickerBase.ts:267
localeβ
β’ Optional
locale: Locale
The date-fns locale object used to localize dates.
Default Value
en-US
Defined inβ
packages/react-day-picker/src/types/DayPickerBase.ts:261
modifiersβ
β’ Optional
modifiers: DayModifiers
Add modifiers to the matching days.
Defined inβ
packages/react-day-picker/src/types/DayPickerBase.ts:254
modifiersClassNamesβ
β’ Optional
modifiersClassNames: ModifiersClassNames
Change the class name for the day matching the modifiers.
Defined inβ
packages/react-day-picker/src/types/DayPickerBase.ts:62
modifiersStylesβ
β’ Optional
modifiersStyles: ModifiersStyles
Change the inline style for the day matching the modifiers.
Defined inβ
packages/react-day-picker/src/types/DayPickerBase.ts:75
monthβ
β’ Optional
month: Date
The month displayed in the calendar.
As opposed to defaultMonth, use this prop with onMonthChange to change the month programmatically.
Defined inβ
packages/react-day-picker/src/types/DayPickerBase.ts:97
numberOfMonthsβ
β’ Optional
numberOfMonths: number
The number of displayed months.
Default Value
1
Defined inβ
packages/react-day-picker/src/types/DayPickerBase.ts:107
onDayBlurβ
β’ Optional
onDayBlur: DayFocusEventHandler
Defined inβ
packages/react-day-picker/src/types/DayPickerBase.ts:283
onDayClickβ
β’ Optional
onDayClick: DayClickEventHandler
Defined inβ
packages/react-day-picker/src/types/DayPickerBase.ts:281
onDayFocusβ
β’ Optional
onDayFocus: DayFocusEventHandler
Defined inβ
packages/react-day-picker/src/types/DayPickerBase.ts:282
onDayKeyDownβ
β’ Optional
onDayKeyDown: DayKeyboardEventHandler
Defined inβ
packages/react-day-picker/src/types/DayPickerBase.ts:286
onDayKeyPressβ
β’ Optional
onDayKeyPress: DayKeyboardEventHandler
Defined inβ
packages/react-day-picker/src/types/DayPickerBase.ts:288
onDayKeyUpβ
β’ Optional
onDayKeyUp: DayKeyboardEventHandler
Defined inβ
packages/react-day-picker/src/types/DayPickerBase.ts:287
onDayMouseEnterβ
β’ Optional
onDayMouseEnter: DayMouseEventHandler
Defined inβ
packages/react-day-picker/src/types/DayPickerBase.ts:284
onDayMouseLeaveβ
β’ Optional
onDayMouseLeave: DayMouseEventHandler
Defined inβ
packages/react-day-picker/src/types/DayPickerBase.ts:285
onDayPointerEnterβ
β’ Optional
onDayPointerEnter: DayPointerEventHandler
Defined inβ
packages/react-day-picker/src/types/DayPickerBase.ts:289
onDayPointerLeaveβ
β’ Optional
onDayPointerLeave: DayPointerEventHandler
Defined inβ
packages/react-day-picker/src/types/DayPickerBase.ts:290
onDayTouchCancelβ
β’ Optional
onDayTouchCancel: DayTouchEventHandler
Defined inβ
packages/react-day-picker/src/types/DayPickerBase.ts:291
onDayTouchEndβ
β’ Optional
onDayTouchEnd: DayTouchEventHandler
Defined inβ
packages/react-day-picker/src/types/DayPickerBase.ts:292
onDayTouchMoveβ
β’ Optional
onDayTouchMove: DayTouchEventHandler
Defined inβ
packages/react-day-picker/src/types/DayPickerBase.ts:293
onDayTouchStartβ
β’ Optional
onDayTouchStart: DayTouchEventHandler
Defined inβ
packages/react-day-picker/src/types/DayPickerBase.ts:294
onMonthChangeβ
β’ Optional
onMonthChange: MonthChangeEventHandler
Event fired when the user navigates between months.
Defined inβ
packages/react-day-picker/src/types/DayPickerBase.ts:101
onNextClickβ
β’ Optional
onNextClick: MonthChangeEventHandler
Defined inβ
packages/react-day-picker/src/types/DayPickerBase.ts:295
onPrevClickβ
β’ Optional
onPrevClick: MonthChangeEventHandler
Defined inβ
packages/react-day-picker/src/types/DayPickerBase.ts:296
onWeekNumberClickβ
β’ Optional
onWeekNumberClick: WeekNumberClickEventHandler
Defined inβ
packages/react-day-picker/src/types/DayPickerBase.ts:297
pagedNavigationβ
β’ Optional
pagedNavigation: boolean
Paginate the month navigation displaying the numberOfMonths at time.
Default Value
false
Defined inβ
packages/react-day-picker/src/types/DayPickerBase.ts:144
reverseMonthsβ
β’ Optional
reverseMonths: boolean
Render the months in reversed order (when numberOfMonths is greater
than 1
) to display the most recent month first.
Default Value
false
Defined inβ
packages/react-day-picker/src/types/DayPickerBase.ts:151
selectedβ
β’ Optional
selected: Matcher
| Matcher
[]
Apply the selected
modifier to the matching days.
Defined inβ
packages/react-day-picker/src/types/DayPickerBase.ts:244
showOutsideDaysβ
β’ Optional
showOutsideDays: boolean
Show the outside days. An outside day is a day falling in the next or the previous month.
Default Value
false
Defined inβ
packages/react-day-picker/src/types/DayPickerBase.ts:184
showWeekNumberβ
β’ Optional
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.
Default Value
false
Defined inβ
packages/react-day-picker/src/types/DayPickerBase.ts:191
styleβ
β’ Optional
style: CSSProperties
Style to apply to the container element.
Defined inβ
packages/react-day-picker/src/types/DayPickerBase.ts:67
stylesβ
β’ Optional
styles: Partial
<Omit
<StyledElement
<CSSProperties
>, InternalModifiersElement
>>
Change the inline styles of the HTML elements.
Defined inβ
packages/react-day-picker/src/types/DayPickerBase.ts:71
toDateβ
β’ Optional
toDate: Date
The latest day to end the month navigation.
Defined inβ
packages/react-day-picker/src/types/DayPickerBase.ts:115
toMonthβ
β’ Optional
toMonth: Date
The latest month to end the month navigation.
Defined inβ
packages/react-day-picker/src/types/DayPickerBase.ts:123
toYearβ
β’ Optional
toYear: number
The latest year to end the month navigation.
Defined inβ
packages/react-day-picker/src/types/DayPickerBase.ts:131
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β
packages/react-day-picker/src/types/DayPickerBase.ts:250
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.