Interface: DayPickerMultipleProps
The props for the DayPicker component when using mode="multiple"
.
Hierarchy
↳
DayPickerMultipleProps
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.
Inherited from
Defined in
src/types/DayPickerBase.ts:220
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
Inherited from
Defined in
src/types/DayPickerBase.ts:167
className
• Optional
className: string
The CSS class to add to the container element. To change the name of the
class instead, use classNames.root
.
Inherited from
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.
Inherited from
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.
Inherited from
Defined in
src/types/DayPickerBase.ts:227
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
Inherited from
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.
Inherited from
Defined in
src/types/DayPickerBase.ts:291
disableNavigation
• Optional
disableNavigation: boolean
Disable the navigation between months.
Default Value
false
Inherited from
DayPickerBase.disableNavigation
Defined in
src/types/DayPickerBase.ts:140
disabled
• Optional
disabled: Matcher
| Matcher
[]
Apply the disabled
modifier to the matching days.
Inherited from
Defined in
src/types/DayPickerBase.ts:246
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.
Inherited from
DayPickerBase.firstWeekContainsDate
Defined in
src/types/DayPickerBase.ts:213
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
Inherited from
Defined in
src/types/DayPickerBase.ts:174
footer
• Optional
footer: ReactNode
Content to add to the table footer element.
Inherited from
Defined in
src/types/DayPickerBase.ts:232
formatters
• Optional
formatters: Partial
<Formatters
>
A map of formatters. Use the formatters to override the default formatting functions.
Inherited from
Defined in
src/types/DayPickerBase.ts:285
fromDate
• Optional
fromDate: Date
The earliest day to start the month navigation.
Inherited from
Defined in
src/types/DayPickerBase.ts:114
fromMonth
• Optional
fromMonth: Date
The earliest month to start the month navigation.
Inherited from
Defined in
src/types/DayPickerBase.ts:122
fromYear
• Optional
fromYear: number
The earliest year to start the month navigation.
Inherited from
Defined in
src/types/DayPickerBase.ts:130
hidden
• Optional
hidden: Matcher
| Matcher
[]
Apply the hidden
modifier to the matching days. Will hide them from the
calendar.
Inherited from
Defined in
src/types/DayPickerBase.ts:251
hideHead
• Optional
hideHead: boolean
Hide the month’s head displaying the weekday names.
Default Value
false
Inherited from
Defined in
src/types/DayPickerBase.ts:180
id
• Optional
id: string
A unique id to replace the random generated id – used by DayPicker for accessibility.
Inherited from
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.
Inherited from
Defined in
src/types/DayPickerBase.ts:241
labels
• Optional
labels: Partial
<Labels
>
Labels creators to override the defaults. Use this prop to customize the ARIA labels attributes.
Inherited from
Defined in
src/types/DayPickerBase.ts:279
lang
• Optional
lang: string
Add the language tag to the container element.
Inherited from
Defined in
src/types/DayPickerBase.ts:307
locale
• Optional
locale: Locale
The date-fns locale object used to localize dates.
Default Value
en-US
Inherited from
Defined in
src/types/DayPickerBase.ts:273
max
• Optional
max: number
The maximum amount of days that can be selected.
Defined in
src/types/DayPickerMultiple.ts:18
min
• Optional
min: number
The minimum amount of days that can be selected.
Defined in
src/types/DayPickerMultiple.ts:16
mode
• mode: "multiple"
Defined in
src/types/DayPickerMultiple.ts:10
modifiers
• Optional
modifiers: DayModifiers
Add modifiers to the matching days.
Inherited from
Defined in
src/types/DayPickerBase.ts:266
modifiersClassNames
• Optional
modifiersClassNames: ModifiersClassNames
Change the class name for the day matching the modifiers.
Inherited from
DayPickerBase.modifiersClassNames
Defined in
modifiersStyles
• Optional
modifiersStyles: ModifiersStyles
Change the inline style for the day matching the modifiers.
Inherited from
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.
Inherited from
Defined in
src/types/DayPickerBase.ts:100
nonce
• Optional
nonce: string
A cryptographic nonce ("number used once") which can be used by Content
Security Policy for the inline style
attributes.
Inherited from
Defined in
src/types/DayPickerBase.ts:297
numberOfMonths
• Optional
numberOfMonths: number
The number of displayed months.
Default Value
1
Inherited from
Defined in
src/types/DayPickerBase.ts:110
onDayBlur
• Optional
onDayBlur: DayFocusEventHandler
Event callback fired when the user blurs from a day.
Inherited from
Defined in
src/types/DayPickerBase.ts:334
onDayClick
• Optional
onDayClick: DayClickEventHandler
Event callback fired when the user clicks on a day.
Inherited from
Defined in
src/types/DayPickerBase.ts:326
onDayFocus
• Optional
onDayFocus: DayFocusEventHandler
Event callback fired when the user focuses on a day.
Inherited from
Defined in
src/types/DayPickerBase.ts:330
onDayKeyDown
• Optional
onDayKeyDown: DayKeyboardEventHandler
Event callback fired when the user presses a key on a day.
Inherited from
Defined in
src/types/DayPickerBase.ts:346
onDayKeyPress
• Optional
onDayKeyPress: DayKeyboardEventHandler
Event callback fired when the user presses a key on a day.
Inherited from
Defined in
src/types/DayPickerBase.ts:354
onDayKeyUp
• Optional
onDayKeyUp: DayKeyboardEventHandler
Event callback fired when the user presses a key on a day.
Inherited from
Defined in
src/types/DayPickerBase.ts:350
onDayMouseEnter
• Optional
onDayMouseEnter: DayMouseEventHandler
Event callback fired when the user hovers on a day.
Inherited from
Defined in
src/types/DayPickerBase.ts:338
onDayMouseLeave
• Optional
onDayMouseLeave: DayMouseEventHandler
Event callback fired when the user hovers away from a day.
Inherited from
Defined in
src/types/DayPickerBase.ts:342
onDayPointerEnter
• Optional
onDayPointerEnter: DayPointerEventHandler
Event callback fired when the pointer enters a day.
Inherited from
DayPickerBase.onDayPointerEnter
Defined in
src/types/DayPickerBase.ts:358
onDayPointerLeave
• Optional
onDayPointerLeave: DayPointerEventHandler
Event callback fired when the pointer leaves a day.
Inherited from
DayPickerBase.onDayPointerLeave
Defined in
src/types/DayPickerBase.ts:362
onDayTouchCancel
• Optional
onDayTouchCancel: DayTouchEventHandler
Event callback when a day touch event is canceled.
Inherited from
DayPickerBase.onDayTouchCancel
Defined in
src/types/DayPickerBase.ts:366
onDayTouchEnd
• Optional
onDayTouchEnd: DayTouchEventHandler
Event callback when a day touch event ends.
Inherited from
Defined in
src/types/DayPickerBase.ts:370
onDayTouchMove
• Optional
onDayTouchMove: DayTouchEventHandler
Event callback when a day touch event moves.
Inherited from
Defined in
src/types/DayPickerBase.ts:374
onDayTouchStart
• Optional
onDayTouchStart: DayTouchEventHandler
Event callback when a day touch event starts.
Inherited from
Defined in
src/types/DayPickerBase.ts:378
onMonthChange
• Optional
onMonthChange: MonthChangeEventHandler
Event fired when the user navigates between months.
Inherited from
Defined in
src/types/DayPickerBase.ts:104
onNextClick
• Optional
onNextClick: MonthChangeEventHandler
Event callback fired when the next month button is clicked.
Inherited from
Defined in
src/types/DayPickerBase.ts:312
onPrevClick
• Optional
onPrevClick: MonthChangeEventHandler
Event callback fired when the previous month button is clicked.
Inherited from
Defined in
src/types/DayPickerBase.ts:316
onSelect
• Optional
onSelect: SelectMultipleEventHandler
Event fired when a days added or removed to the selection.
Defined in
src/types/DayPickerMultiple.ts:14
onWeekNumberClick
• Optional
onWeekNumberClick: WeekNumberClickEventHandler
Event callback fired when the week number is clicked. Requires
showWeekNumbers
set.
Inherited from
DayPickerBase.onWeekNumberClick
Defined in
src/types/DayPickerBase.ts:321
pagedNavigation
• Optional
pagedNavigation: boolean
Paginate the month navigation displaying the numberOfMonths at time.
Default Value
false
Inherited from
Defined in
src/types/DayPickerBase.ts:147
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
Inherited from
Defined in
src/types/DayPickerBase.ts:154
selected
• Optional
selected: Date
[]
The selected days.
Overrides
Defined in
src/types/DayPickerMultiple.ts:12
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
Inherited from
Defined in
src/types/DayPickerBase.ts:187
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
Inherited from
Defined in
src/types/DayPickerBase.ts:199
style
• Optional
style: CSSProperties
Style to apply to the container element.
Inherited from
Defined in
styles
• Optional
styles: Partial
<Omit
<StyledElement
<CSSProperties
>, InternalModifiersElement
>>
Change the inline styles of the HTML elements.
Inherited from
Defined in
title
• Optional
title: string
Add a title
attribute to the container element.
Inherited from
Defined in
src/types/DayPickerBase.ts:302
toDate
• Optional
toDate: Date
The latest day to end the month navigation.
Inherited from
Defined in
src/types/DayPickerBase.ts:118
toMonth
• Optional
toMonth: Date
The latest month to end the month navigation.
Inherited from
Defined in
src/types/DayPickerBase.ts:126
toYear
• Optional
toYear: number
The latest year to end the month navigation.
Inherited from
Defined in
src/types/DayPickerBase.ts:134
today
• Optional
today: Date
The today’s date. Default is the current date. This Date will get the
today
modifier to style the day.
Inherited from
Defined in
src/types/DayPickerBase.ts:262
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.