Skip to main content

Interface: DayPickerMultipleProps

The props for the DayPicker component when using mode="multiple".

Hierarchy

Properties

ISOWeek

Optional ISOWeek: boolean

Use ISO week dates instead of the locale setting. Setting this prop will ignore weekStartsOn and firstWeekContainsDate.

See

https://en.wikipedia.org/wiki/ISO_week_date

Inherited from

DayPickerBase.ISOWeek

Defined in

src/types/DayPickerBase.ts:221


captionLayout

Optional captionLayout: CaptionLayout

Change the layout of the caption:

  • buttons: display prev/right buttons
  • dropdown: 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

DayPickerBase.captionLayout

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

DayPickerBase.className

Defined in

src/types/DayPickerBase.ts:54


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

DayPickerBase.classNames

Defined in

src/types/DayPickerBase.ts:61


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

DayPickerBase.components

Defined in

src/types/DayPickerBase.ts:228


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

DayPickerBase.defaultMonth

Defined in

src/types/DayPickerBase.ts:93


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

DayPickerBase.dir

Defined in

src/types/DayPickerBase.ts:292


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

DayPickerBase.disabled

Defined in

src/types/DayPickerBase.ts:247


firstWeekContainsDate

Optional firstWeekContainsDate: 1 | 4

The day of January, which is always in the first week of the year. Can be either Monday (1) or Thursday (4).

See

Inherited from

DayPickerBase.firstWeekContainsDate

Defined in

src/types/DayPickerBase.ts:214


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

DayPickerBase.fixedWeeks

Defined in

src/types/DayPickerBase.ts:174


Optional footer: ReactNode

Content to add to the table footer element.

Inherited from

DayPickerBase.footer

Defined in

src/types/DayPickerBase.ts:233


formatters

Optional formatters: Partial<Formatters>

A map of formatters. Use the formatters to override the default formatting functions.

Inherited from

DayPickerBase.formatters

Defined in

src/types/DayPickerBase.ts:286


fromDate

Optional fromDate: Date

The earliest day to start the month navigation.

Inherited from

DayPickerBase.fromDate

Defined in

src/types/DayPickerBase.ts:114


fromMonth

Optional fromMonth: Date

The earliest month to start the month navigation.

Inherited from

DayPickerBase.fromMonth

Defined in

src/types/DayPickerBase.ts:122


fromYear

Optional fromYear: number

The earliest year to start the month navigation.

Inherited from

DayPickerBase.fromYear

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

DayPickerBase.hidden

Defined in

src/types/DayPickerBase.ts:252


hideHead

Optional hideHead: boolean

Hide the month’s head displaying the weekday names.

Default Value

false

Inherited from

DayPickerBase.hideHead

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

DayPickerBase.id

Defined in

src/types/DayPickerBase.ts:84


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

DayPickerBase.initialFocus

Defined in

src/types/DayPickerBase.ts:242


labels

Optional labels: Partial<Labels>

Labels creators to override the defaults. Use this prop to customize the ARIA labels attributes.

Inherited from

DayPickerBase.labels

Defined in

src/types/DayPickerBase.ts:280


lang

Optional lang: string

Add the language tag to the container element.

Inherited from

DayPickerBase.lang

Defined in

src/types/DayPickerBase.ts:308


locale

Optional locale: Locale

The date-fns locale object used to localize dates.

Default Value

en-US

Inherited from

DayPickerBase.locale

Defined in

src/types/DayPickerBase.ts:274


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

DayPickerBase.modifiers

Defined in

src/types/DayPickerBase.ts:267


modifiersClassNames

Optional modifiersClassNames: ModifiersClassNames

Change the class name for the day matching the modifiers.

Inherited from

DayPickerBase.modifiersClassNames

Defined in

src/types/DayPickerBase.ts:65


modifiersStyles

Optional modifiersStyles: ModifiersStyles

Change the inline style for the day matching the modifiers.

Inherited from

DayPickerBase.modifiersStyles

Defined in

src/types/DayPickerBase.ts:78


month

Optional month: Date

The month displayed in the calendar.

As opposed to DayPickerBase.defaultMonth, use this prop with DayPickerBase.onMonthChange to change the month programmatically.

Inherited from

DayPickerBase.month

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

DayPickerBase.nonce

Defined in

src/types/DayPickerBase.ts:298


numberOfMonths

Optional numberOfMonths: number

The number of displayed months.

Default Value

1

Inherited from

DayPickerBase.numberOfMonths

Defined in

src/types/DayPickerBase.ts:110


onDayBlur

Optional onDayBlur: DayFocusEventHandler

Event callback fired when the user blurs from a day.

Inherited from

DayPickerBase.onDayBlur

Defined in

src/types/DayPickerBase.ts:335


onDayClick

Optional onDayClick: DayClickEventHandler

Event callback fired when the user clicks on a day.

Inherited from

DayPickerBase.onDayClick

Defined in

src/types/DayPickerBase.ts:327


onDayFocus

Optional onDayFocus: DayFocusEventHandler

Event callback fired when the user focuses on a day.

Inherited from

DayPickerBase.onDayFocus

Defined in

src/types/DayPickerBase.ts:331


onDayKeyDown

Optional onDayKeyDown: DayKeyboardEventHandler

Event callback fired when the user presses a key on a day.

Inherited from

DayPickerBase.onDayKeyDown

Defined in

src/types/DayPickerBase.ts:347


onDayKeyPress

Optional onDayKeyPress: DayKeyboardEventHandler

Event callback fired when the user presses a key on a day.

Inherited from

DayPickerBase.onDayKeyPress

Defined in

src/types/DayPickerBase.ts:355


onDayKeyUp

Optional onDayKeyUp: DayKeyboardEventHandler

Event callback fired when the user presses a key on a day.

Inherited from

DayPickerBase.onDayKeyUp

Defined in

src/types/DayPickerBase.ts:351


onDayMouseEnter

Optional onDayMouseEnter: DayMouseEventHandler

Event callback fired when the user hovers on a day.

Inherited from

DayPickerBase.onDayMouseEnter

Defined in

src/types/DayPickerBase.ts:339


onDayMouseLeave

Optional onDayMouseLeave: DayMouseEventHandler

Event callback fired when the user hovers away from a day.

Inherited from

DayPickerBase.onDayMouseLeave

Defined in

src/types/DayPickerBase.ts:343


onDayPointerEnter

Optional onDayPointerEnter: DayPointerEventHandler

Event callback fired when the pointer enters a day.

Inherited from

DayPickerBase.onDayPointerEnter

Defined in

src/types/DayPickerBase.ts:359


onDayPointerLeave

Optional onDayPointerLeave: DayPointerEventHandler

Event callback fired when the pointer leaves a day.

Inherited from

DayPickerBase.onDayPointerLeave

Defined in

src/types/DayPickerBase.ts:363


onDayTouchCancel

Optional onDayTouchCancel: DayTouchEventHandler

Event callback when a day touch event is canceled.

Inherited from

DayPickerBase.onDayTouchCancel

Defined in

src/types/DayPickerBase.ts:367


onDayTouchEnd

Optional onDayTouchEnd: DayTouchEventHandler

Event callback when a day touch event ends.

Inherited from

DayPickerBase.onDayTouchEnd

Defined in

src/types/DayPickerBase.ts:371


onDayTouchMove

Optional onDayTouchMove: DayTouchEventHandler

Event callback when a day touch event moves.

Inherited from

DayPickerBase.onDayTouchMove

Defined in

src/types/DayPickerBase.ts:375


onDayTouchStart

Optional onDayTouchStart: DayTouchEventHandler

Event callback when a day touch event starts.

Inherited from

DayPickerBase.onDayTouchStart

Defined in

src/types/DayPickerBase.ts:379


onMonthChange

Optional onMonthChange: MonthChangeEventHandler

Event fired when the user navigates between months.

Inherited from

DayPickerBase.onMonthChange

Defined in

src/types/DayPickerBase.ts:104


onNextClick

Optional onNextClick: MonthChangeEventHandler

Event callback fired when the next month button is clicked.

Inherited from

DayPickerBase.onNextClick

Defined in

src/types/DayPickerBase.ts:313


onPrevClick

Optional onPrevClick: MonthChangeEventHandler

Event callback fired when the previous month button is clicked.

Inherited from

DayPickerBase.onPrevClick

Defined in

src/types/DayPickerBase.ts:317


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:322


pagedNavigation

Optional pagedNavigation: boolean

Paginate the month navigation displaying the numberOfMonths at time.

Default Value

false

Inherited from

DayPickerBase.pagedNavigation

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

DayPickerBase.reverseMonths

Defined in

src/types/DayPickerBase.ts:154


selected

Optional selected: Date[]

The selected days.

Overrides

DayPickerBase.selected

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

DayPickerBase.showOutsideDays

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

DayPickerBase.showWeekNumber

Defined in

src/types/DayPickerBase.ts:199


style

Optional style: CSSProperties

Style to apply to the container element.

Inherited from

DayPickerBase.style

Defined in

src/types/DayPickerBase.ts:70


styles

Optional styles: Partial<Omit<StyledElement<CSSProperties>, InternalModifiersElement>>

Change the inline styles of the HTML elements.

Inherited from

DayPickerBase.styles

Defined in

src/types/DayPickerBase.ts:74


title

Optional title: string

Add a title attribute to the container element.

Inherited from

DayPickerBase.title

Defined in

src/types/DayPickerBase.ts:303


toDate

Optional toDate: Date

The latest day to end the month navigation.

Inherited from

DayPickerBase.toDate

Defined in

src/types/DayPickerBase.ts:118


toMonth

Optional toMonth: Date

The latest month to end the month navigation.

Inherited from

DayPickerBase.toMonth

Defined in

src/types/DayPickerBase.ts:126


toYear

Optional toYear: number

The latest year to end the month navigation.

Inherited from

DayPickerBase.toYear

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

DayPickerBase.today

Defined in

src/types/DayPickerBase.ts:263


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

ISOWeek.

Inherited from

DayPickerBase.weekStartsOn

Defined in

src/types/DayPickerBase.ts:205