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:183
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
packages/react-day-picker/src/types/DayPickerBase.ts:145
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:45
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:52
components
• Optional components: CustomComponents
Map of components used to create the layout. Look at the components source to understand how internal components are built.
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:188
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 []] and [onMonthChange.
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:81
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:238
disableNavigation
• Optional disableNavigation: boolean
Disable the navigation between months.
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:124
disabled
• Optional disabled: Matcher | Matcher[]
Apply the disabled modifier to the matching days.
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:205
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:176
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
packages/react-day-picker/src/types/DayPickerBase.ts:150
footer
• Optional footer: ReactNode
Content to add to the tfoot element.
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:191
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:244
fromDate
• Optional fromDate: Date
The earliest day to start the month navigation.
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:100
fromMonth
• Optional fromMonth: Date
The earliest month to start the month navigation.
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:108
fromYear
• Optional fromYear: number
The earliest year to start the month navigation.
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:116
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:210
hideHead
• Optional hideHead: boolean
Hide the month’s head displaying the weekday names.
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:154
id
• Optional id: string
An unique id to replace the random generated id, used by DayPicker for accessibility.
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:74
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:200
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:232
locale
• Optional locale: Locale
The date-fns locale object used to localize dates. Defaults to* en-US.
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:226
modifiers
• Optional modifiers: DayModifiers
Add modifiers to the matching days.
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:223
modifiersClassNames
• Optional modifiersClassNames: ModifiersClassNames
Change the class name for the day matching the modifiers.
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:56
modifiersStyles
• Optional modifiersStyles: ModifiersStyles
Change the inline style for the day matching the modifiers.
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:69
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:88
numberOfMonths
• Optional numberOfMonths: number
The number of displayed months. Defaults to 1.
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:96
onDayBlur
• Optional onDayBlur: DayFocusEventHandler
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:248
onDayClick
• Optional onDayClick: DayClickEventHandler
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:246
onDayFocus
• Optional onDayFocus: DayFocusEventHandler
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:247
onDayKeyDown
• Optional onDayKeyDown: DayKeyboardEventHandler
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:251
onDayKeyPress
• Optional onDayKeyPress: DayKeyboardEventHandler
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:253
onDayKeyUp
• Optional onDayKeyUp: DayKeyboardEventHandler
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:252
onDayMouseEnter
• Optional onDayMouseEnter: DayMouseEventHandler
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:249
onDayMouseLeave
• Optional onDayMouseLeave: DayMouseEventHandler
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:250
onDayTouchCancel
• Optional onDayTouchCancel: DayTouchEventHandler
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:254
onDayTouchEnd
• Optional onDayTouchEnd: DayTouchEventHandler
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:255
onDayTouchMove
• Optional onDayTouchMove: DayTouchEventHandler
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:256
onDayTouchStart
• Optional onDayTouchStart: DayTouchEventHandler
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:257
onMonthChange
• Optional onMonthChange: MonthChangeEventHandler
Event fired when the user navigates between months.
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:92
onNextClick
• Optional onNextClick: MonthChangeEventHandler
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:258
onPrevClick
• Optional onPrevClick: MonthChangeEventHandler
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:259
onWeekNumberClick
• Optional onWeekNumberClick: WeekNumberClickEventHandler
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:260
pagedNavigation
• Optional pagedNavigation: boolean
Paginate the month navigation displaying the numberOfMonths at time.
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:128
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
packages/react-day-picker/src/types/DayPickerBase.ts:133
selected
• Optional selected: Matcher | Matcher[]
Apply the selected modifier to the matching days.
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:213
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
packages/react-day-picker/src/types/DayPickerBase.ts:159
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:166
style
• Optional style: CSSProperties
Style to apply to the container element.
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:61
styles
• Optional styles: Partial<Omit<StyledElement<CSSProperties>, InternalModifiersElement>>
Change the inline styles for each UIElement.
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:65
toDate
• Optional toDate: Date
The latest day to end the month navigation.
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:104
toMonth
• Optional toMonth: Date
The latest month to end the month navigation.
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:112
toYear
• Optional toYear: number
The latest year to end the month navigation.
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:120
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:219
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.