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.