Skip to main content
Version: 8.10.1

Interface: DayPickerRangeProps

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

Extends​

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

Source​

src/types/DayPickerBase.ts:200

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

Source​

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.

Inherited from​

DayPickerBase . className

Source​

src/types/DayPickerBase.ts:55

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

Source​

src/types/DayPickerBase.ts:62

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

Source​

src/types/DayPickerBase.ts:208

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

Source​

src/types/DayPickerBase.ts:86

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

Source​

src/types/DayPickerBase.ts:264

disableNavigation?​

optional disableNavigation: boolean

Disable the navigation between months.

Default Value​

false

Inherited from​

DayPickerBase . disableNavigation

Source​

src/types/DayPickerBase.ts:119

disabled?​

optional disabled: Matcher | Matcher[]

Apply the disabled modifier to the matching days.

Inherited from​

DayPickerBase . disabled

Source​

src/types/DayPickerBase.ts:223

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

Source​

src/types/DayPickerBase.ts:193

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

Source​

src/types/DayPickerBase.ts:152

optional footer: ReactNode

Content to add to the table footer element.

Inherited from​

DayPickerBase . footer

Source​

src/types/DayPickerBase.ts:211

formatters?​

optional formatters: Partial <Formatters>

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

Inherited from​

DayPickerBase . formatters

Source​

src/types/DayPickerBase.ts:258

fromDate?​

optional fromDate: Date

The earliest day to start the month navigation.

Inherited from​

DayPickerBase . fromDate

Source​

src/types/DayPickerBase.ts:103

fromMonth?​

optional fromMonth: Date

The earliest month to start the month navigation.

Inherited from​

DayPickerBase . fromMonth

Source​

src/types/DayPickerBase.ts:107

fromYear?​

optional fromYear: number

The earliest year to start the month navigation.

Inherited from​

DayPickerBase . fromYear

Source​

src/types/DayPickerBase.ts:111

hidden?​

optional hidden: Matcher | Matcher[]

Apply the hidden modifier to the matching days. Will hide them from the calendar.

Inherited from​

DayPickerBase . hidden

Source​

src/types/DayPickerBase.ts:228

hideHead?​

optional hideHead: boolean

Hide the month’s head displaying the weekday names.

Default Value​

false

Inherited from​

DayPickerBase . hideHead

Source​

src/types/DayPickerBase.ts:158

id?​

optional id: string

A unique id to replace the random generated id – used by DayPicker for accessibility.

Inherited from​

DayPickerBase . id

Source​

src/types/DayPickerBase.ts:77

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

Source​

src/types/DayPickerBase.ts:220

labels?​

optional labels: Partial <Labels>

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

Inherited from​

DayPickerBase . labels

Source​

src/types/DayPickerBase.ts:252

lang?​

optional lang: string

Add the language tag to the container element.

Inherited from​

DayPickerBase . lang

Source​

src/types/DayPickerBase.ts:276

locale?​

optional locale: Locale

The date-fns locale object used to localize dates.

Default Value​

en-US

Inherited from​

DayPickerBase . locale

Source​

src/types/DayPickerBase.ts:246

max?​

optional max: number

The maximum amount of days that can be selected.

Source​

src/types/DayPickerRange.ts:18

min?​

optional min: number

The minimum amount of days that can be selected.

Source​

src/types/DayPickerRange.ts:16

mode​

mode: "range"

Source​

src/types/DayPickerRange.ts:10

modifiers?​

optional modifiers: DayModifiers

Add modifiers to the matching days.

Inherited from​

DayPickerBase . modifiers

Source​

src/types/DayPickerBase.ts:239

modifiersClassNames?​

optional modifiersClassNames: ModifiersClassNames

Change the class name for the day matching the modifiers.

Inherited from​

DayPickerBase . modifiersClassNames

Source​

src/types/DayPickerBase.ts:64

modifiersStyles?​

optional modifiersStyles: ModifiersStyles

Change the inline style for the day matching the modifiers.

Inherited from​

DayPickerBase . modifiersStyles

Source​

src/types/DayPickerBase.ts:71

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

Source​

src/types/DayPickerBase.ts:93

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

Source​

src/types/DayPickerBase.ts:270

numberOfMonths?​

optional numberOfMonths: number

The number of displayed months.

Default Value​

1

Inherited from​

DayPickerBase . numberOfMonths

Source​

src/types/DayPickerBase.ts:101

onDayBlur?​

optional onDayBlur: DayFocusEventHandler

Event callback fired when the user blurs from a day.

Inherited from​

DayPickerBase . onDayBlur

Source​

src/types/DayPickerBase.ts:293

onDayClick?​

optional onDayClick: DayClickEventHandler

Event callback fired when the user clicks on a day.

Inherited from​

DayPickerBase . onDayClick

Source​

src/types/DayPickerBase.ts:289

onDayFocus?​

optional onDayFocus: DayFocusEventHandler

Event callback fired when the user focuses on a day.

Inherited from​

DayPickerBase . onDayFocus

Source​

src/types/DayPickerBase.ts:291

onDayKeyDown?​

optional onDayKeyDown: DayKeyboardEventHandler

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

Inherited from​

DayPickerBase . onDayKeyDown

Source​

src/types/DayPickerBase.ts:299

onDayKeyPress?​

optional onDayKeyPress: DayKeyboardEventHandler

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

Inherited from​

DayPickerBase . onDayKeyPress

Source​

src/types/DayPickerBase.ts:303

onDayKeyUp?​

optional onDayKeyUp: DayKeyboardEventHandler

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

Inherited from​

DayPickerBase . onDayKeyUp

Source​

src/types/DayPickerBase.ts:301

onDayMouseEnter?​

optional onDayMouseEnter: DayMouseEventHandler

Event callback fired when the user hovers on a day.

Inherited from​

DayPickerBase . onDayMouseEnter

Source​

src/types/DayPickerBase.ts:295

onDayMouseLeave?​

optional onDayMouseLeave: DayMouseEventHandler

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

Inherited from​

DayPickerBase . onDayMouseLeave

Source​

src/types/DayPickerBase.ts:297

onDayPointerEnter?​

optional onDayPointerEnter: DayPointerEventHandler

Event callback fired when the pointer enters a day.

Inherited from​

DayPickerBase . onDayPointerEnter

Source​

src/types/DayPickerBase.ts:305

onDayPointerLeave?​

optional onDayPointerLeave: DayPointerEventHandler

Event callback fired when the pointer leaves a day.

Inherited from​

DayPickerBase . onDayPointerLeave

Source​

src/types/DayPickerBase.ts:307

onDayTouchCancel?​

optional onDayTouchCancel: DayTouchEventHandler

Event callback when a day touch event is canceled.

Inherited from​

DayPickerBase . onDayTouchCancel

Source​

src/types/DayPickerBase.ts:309

onDayTouchEnd?​

optional onDayTouchEnd: DayTouchEventHandler

Event callback when a day touch event ends.

Inherited from​

DayPickerBase . onDayTouchEnd

Source​

src/types/DayPickerBase.ts:311

onDayTouchMove?​

optional onDayTouchMove: DayTouchEventHandler

Event callback when a day touch event moves.

Inherited from​

DayPickerBase . onDayTouchMove

Source​

src/types/DayPickerBase.ts:313

onDayTouchStart?​

optional onDayTouchStart: DayTouchEventHandler

Event callback when a day touch event starts.

Inherited from​

DayPickerBase . onDayTouchStart

Source​

src/types/DayPickerBase.ts:315

onMonthChange?​

optional onMonthChange: MonthChangeEventHandler

Event fired when the user navigates between months.

Inherited from​

DayPickerBase . onMonthChange

Source​

src/types/DayPickerBase.ts:95

onNextClick?​

optional onNextClick: MonthChangeEventHandler

Event callback fired when the next month button is clicked.

Inherited from​

DayPickerBase . onNextClick

Source​

src/types/DayPickerBase.ts:279

onPrevClick?​

optional onPrevClick: MonthChangeEventHandler

Event callback fired when the previous month button is clicked.

Inherited from​

DayPickerBase . onPrevClick

Source​

src/types/DayPickerBase.ts:281

onSelect?​

optional onSelect: SelectRangeEventHandler

Event fired when a range (or a part of the range) is selected.

Source​

src/types/DayPickerRange.ts:14

onWeekNumberClick?​

optional onWeekNumberClick: WeekNumberClickEventHandler

Event callback fired when the week number is clicked. Requires showWeekNumbers set.

Inherited from​

DayPickerBase . onWeekNumberClick

Source​

src/types/DayPickerBase.ts:286

pagedNavigation?​

optional pagedNavigation: boolean

Paginate the month navigation displaying the numberOfMonths at time.

Default Value​

false

Inherited from​

DayPickerBase . pagedNavigation

Source​

src/types/DayPickerBase.ts:125

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

Source​

src/types/DayPickerBase.ts:132

selected?​

optional selected: DateRange

The selected range of days.

Overrides​

DayPickerBase . selected

Source​

src/types/DayPickerRange.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

Source​

src/types/DayPickerBase.ts:165

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.

Default Value​

false

See​

ISOWeek , weekStartsOn and firstWeekContainsDate.

Inherited from​

DayPickerBase . showWeekNumber

Source​

src/types/DayPickerBase.ts:177

style?​

optional style: CSSProperties

Style to apply to the container element.

Inherited from​

DayPickerBase . style

Source​

src/types/DayPickerBase.ts:67

styles?​

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

Change the inline styles of the HTML elements.

Inherited from​

DayPickerBase . styles

Source​

src/types/DayPickerBase.ts:69

title?​

optional title: string

Add a title attribute to the container element.

Inherited from​

DayPickerBase . title

Source​

src/types/DayPickerBase.ts:273

toDate?​

optional toDate: Date

The latest day to end the month navigation.

Inherited from​

DayPickerBase . toDate

Source​

src/types/DayPickerBase.ts:105

toMonth?​

optional toMonth: Date

The latest month to end the month navigation.

Inherited from​

DayPickerBase . toMonth

Source​

src/types/DayPickerBase.ts:109

toYear?​

optional toYear: number

The latest year to end the month navigation.

Inherited from​

DayPickerBase . toYear

Source​

src/types/DayPickerBase.ts:113

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

Source​

src/types/DayPickerBase.ts:237

weekStartsOn?​

optional weekStartsOn: 0 | 2 | 1 | 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

Source​

src/types/DayPickerBase.ts:184