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
src/types/DayPickerBase.ts:217
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
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
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
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
src/types/DayPickerBase.ts:224
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
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
src/types/DayPickerBase.ts:282
disableNavigation
• Optional
disableNavigation: boolean
Disable the navigation between months.
Default Value
false
Defined in
src/types/DayPickerBase.ts:137
disabled
• Optional
disabled: Matcher
| Matcher
[]
Apply the disabled
modifier to the matching days.
Defined in
src/types/DayPickerBase.ts:243
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
See also ISOWeek.
Defined in
src/types/DayPickerBase.ts:210
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
src/types/DayPickerBase.ts:171
footer
• Optional
footer: ReactNode
Content to add to the table footer element.
Defined in
src/types/DayPickerBase.ts:229
formatters
• Optional
formatters: Partial
<Formatters
>
A map of formatters. Use the formatters to override the default formatting functions.
Defined in
src/types/DayPickerBase.ts:288
fromDate
• Optional
fromDate: Date
The earliest day to start the month navigation.
Defined in
src/types/DayPickerBase.ts:111
fromMonth
• Optional
fromMonth: Date
The earliest month to start the month navigation.
Defined in
src/types/DayPickerBase.ts:119
fromYear
• Optional
fromYear: number
The earliest year to start the month navigation.
Defined in
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
src/types/DayPickerBase.ts:248
hideHead
• Optional
hideHead: boolean
Hide the month’s head displaying the weekday names.
Default Value
false
Defined in
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
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
src/types/DayPickerBase.ts:238
labels
• Optional
labels: Partial
<Labels
>
Labels creators to override the defaults. Use this prop to customize the ARIA labels attributes.
Defined in
src/types/DayPickerBase.ts:276
locale
• Optional
locale: Locale
The date-fns locale object used to localize dates.
Default Value
en-US
Defined in
src/types/DayPickerBase.ts:270
modifiers
• Optional
modifiers: DayModifiers
Add modifiers to the matching days.
Defined in
src/types/DayPickerBase.ts:263
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 displayed 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.
Default Value
1
Defined in
src/types/DayPickerBase.ts:107
onDayBlur
• Optional
onDayBlur: DayFocusEventHandler
Defined in
src/types/DayPickerBase.ts:292
onDayClick
• Optional
onDayClick: DayClickEventHandler
Defined in
src/types/DayPickerBase.ts:290
onDayFocus
• Optional
onDayFocus: DayFocusEventHandler
Defined in
src/types/DayPickerBase.ts:291
onDayKeyDown
• Optional
onDayKeyDown: DayKeyboardEventHandler
Defined in
src/types/DayPickerBase.ts:295
onDayKeyPress
• Optional
onDayKeyPress: DayKeyboardEventHandler
Defined in
src/types/DayPickerBase.ts:297
onDayKeyUp
• Optional
onDayKeyUp: DayKeyboardEventHandler
Defined in
src/types/DayPickerBase.ts:296
onDayMouseEnter
• Optional
onDayMouseEnter: DayMouseEventHandler
Defined in
src/types/DayPickerBase.ts:293
onDayMouseLeave
• Optional
onDayMouseLeave: DayMouseEventHandler
Defined in
src/types/DayPickerBase.ts:294
onDayPointerEnter
• Optional
onDayPointerEnter: DayPointerEventHandler
Defined in
src/types/DayPickerBase.ts:298
onDayPointerLeave
• Optional
onDayPointerLeave: DayPointerEventHandler
Defined in
src/types/DayPickerBase.ts:299
onDayTouchCancel
• Optional
onDayTouchCancel: DayTouchEventHandler
Defined in
src/types/DayPickerBase.ts:300
onDayTouchEnd
• Optional
onDayTouchEnd: DayTouchEventHandler
Defined in
src/types/DayPickerBase.ts:301
onDayTouchMove
• Optional
onDayTouchMove: DayTouchEventHandler
Defined in
src/types/DayPickerBase.ts:302
onDayTouchStart
• Optional
onDayTouchStart: DayTouchEventHandler
Defined in
src/types/DayPickerBase.ts:303
onMonthChange
• Optional
onMonthChange: MonthChangeEventHandler
Event fired when the user navigates between months.
Defined in
src/types/DayPickerBase.ts:101
onNextClick
• Optional
onNextClick: MonthChangeEventHandler
Defined in
src/types/DayPickerBase.ts:304
onPrevClick
• Optional
onPrevClick: MonthChangeEventHandler
Defined in
src/types/DayPickerBase.ts:305
onWeekNumberClick
• Optional
onWeekNumberClick: WeekNumberClickEventHandler
Defined in
src/types/DayPickerBase.ts:306
pagedNavigation
• Optional
pagedNavigation: boolean
Paginate the month navigation displaying the numberOfMonths at time.
Default Value
false
Defined in
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
src/types/DayPickerBase.ts:151
selected
• Optional
selected: Matcher
| Matcher
[]
Apply the selected
modifier to the matching days.
Defined in
src/types/DayPickerBase.ts:253
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
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.
- to change how the week numbers are displayed, use the Formatters prop.
See
ISOWeek, weekStartsOn and firstWeekContainsDate.
Default Value
false
Defined in
src/types/DayPickerBase.ts:196
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 of the HTML elements.
Defined in
toDate
• Optional
toDate: Date
The latest day to end the month navigation.
Defined in
src/types/DayPickerBase.ts:115
toMonth
• Optional
toMonth: Date
The latest month to end the month navigation.
Defined in
src/types/DayPickerBase.ts:123
toYear
• Optional
toYear: number
The latest year to end the month navigation.
Defined in
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
src/types/DayPickerBase.ts:259
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.
See also ISOWeek.