Interface: DayPickerBase

The base props for the DayPicker component and the DayPickerContext.

Extended by

• DayPickerContextValue
• DayPickerDefaultProps
• DayPickerMultipleProps
• DayPickerRangeProps
• DayPickerSingleProps

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

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

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.

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.

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.

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

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.

Source

src/types/DayPickerBase.ts:264

---

disableNavigation?

optional disableNavigation: boolean

Disable the navigation between months.

Default Value

false

Source

src/types/DayPickerBase.ts:119

---

disabled?

optional disabled: Matcher | Matcher[]

Apply the disabled modifier to the matching days.

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

• https://date-fns.org/docs/getWeek
• https://en.wikipedia.org/wiki/Week#Numbering
• ISOWeek .

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

Source

src/types/DayPickerBase.ts:152

---

footer?

optional footer: ReactNode

Content to add to the table footer element.

Source

src/types/DayPickerBase.ts:211

---

formatters?

optional formatters: Partial <Formatters>

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

Source

src/types/DayPickerBase.ts:258

---

fromDate?

optional fromDate: Date

The earliest day to start the month navigation.

Source

src/types/DayPickerBase.ts:103

---

fromMonth?

optional fromMonth: Date

The earliest month to start the month navigation.

Source

src/types/DayPickerBase.ts:107

---

fromYear?

optional fromYear: number

The earliest year to start the month navigation.

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.

Source

src/types/DayPickerBase.ts:228

---

hideHead?

optional hideHead: boolean

Hide the month’s head displaying the weekday names.

Default Value

false

Source

src/types/DayPickerBase.ts:158

---

id?

optional id: string

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

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.

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.

Source

src/types/DayPickerBase.ts:252

---

lang?

optional lang: string

Add the language tag to the container element.

Source

src/types/DayPickerBase.ts:276

---

locale?

optional locale: Locale

The date-fns locale object used to localize dates.

Default Value

en-US

Source

src/types/DayPickerBase.ts:246

---

modifiers?

optional modifiers: DayModifiers

Add modifiers to the matching days.

Source

src/types/DayPickerBase.ts:239

---

modifiersClassNames?

optional modifiersClassNames: ModifiersClassNames

Change the class name for the day matching the modifiers.

Source

src/types/DayPickerBase.ts:64

---

modifiersStyles?

optional modifiersStyles: ModifiersStyles

Change the inline style for the day matching the modifiers.

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.

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.

Source

src/types/DayPickerBase.ts:270

---

numberOfMonths?

optional numberOfMonths: number

The number of displayed months.

Default Value

1

Source

src/types/DayPickerBase.ts:101

---

onDayBlur?

optional onDayBlur: DayFocusEventHandler

Event callback fired when the user blurs from a day.

Source

src/types/DayPickerBase.ts:293

---

onDayClick?

optional onDayClick: DayClickEventHandler

Event callback fired when the user clicks on a day.

Source

src/types/DayPickerBase.ts:289

---

onDayFocus?

optional onDayFocus: DayFocusEventHandler

Event callback fired when the user focuses on a day.

Source

src/types/DayPickerBase.ts:291

---

onDayKeyDown?

optional onDayKeyDown: DayKeyboardEventHandler

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

Source

src/types/DayPickerBase.ts:299

---

onDayKeyPress?

optional onDayKeyPress: DayKeyboardEventHandler

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

Source

src/types/DayPickerBase.ts:303

---

onDayKeyUp?

optional onDayKeyUp: DayKeyboardEventHandler

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

Source

src/types/DayPickerBase.ts:301

---

onDayMouseEnter?

optional onDayMouseEnter: DayMouseEventHandler

Event callback fired when the user hovers on a day.

Source

src/types/DayPickerBase.ts:295

---

onDayMouseLeave?

optional onDayMouseLeave: DayMouseEventHandler

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

Source

src/types/DayPickerBase.ts:297

---

onDayPointerEnter?

optional onDayPointerEnter: DayPointerEventHandler

Event callback fired when the pointer enters a day.

Source

src/types/DayPickerBase.ts:305

---

onDayPointerLeave?

optional onDayPointerLeave: DayPointerEventHandler

Event callback fired when the pointer leaves a day.

Source

src/types/DayPickerBase.ts:307

---

onDayTouchCancel?

optional onDayTouchCancel: DayTouchEventHandler

Event callback when a day touch event is canceled.

Source

src/types/DayPickerBase.ts:309

---

onDayTouchEnd?

optional onDayTouchEnd: DayTouchEventHandler

Event callback when a day touch event ends.

Source

src/types/DayPickerBase.ts:311

---

onDayTouchMove?

optional onDayTouchMove: DayTouchEventHandler

Event callback when a day touch event moves.

Source

src/types/DayPickerBase.ts:313

---

onDayTouchStart?

optional onDayTouchStart: DayTouchEventHandler

Event callback when a day touch event starts.

Source

src/types/DayPickerBase.ts:315

---

onMonthChange?

optional onMonthChange: MonthChangeEventHandler

Event fired when the user navigates between months.

Source

src/types/DayPickerBase.ts:95

---

onNextClick?

optional onNextClick: MonthChangeEventHandler

Event callback fired when the next month button is clicked.

Source

src/types/DayPickerBase.ts:279

---

onPrevClick?

optional onPrevClick: MonthChangeEventHandler

Event callback fired when the previous month button is clicked.

Source

src/types/DayPickerBase.ts:281

---

onWeekNumberClick?

optional onWeekNumberClick: WeekNumberClickEventHandler

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

Source

src/types/DayPickerBase.ts:286

---

pagedNavigation?

optional pagedNavigation: boolean

Paginate the month navigation displaying the numberOfMonths at time.

Default Value

false

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

Source

src/types/DayPickerBase.ts:132

---

selected?

optional selected: Matcher | Matcher[]

Apply the selected modifier to the matching days.

Source

src/types/DayPickerBase.ts:231

---

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

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.

Source

src/types/DayPickerBase.ts:177

---

style?

optional style: CSSProperties

Style to apply to the container element.

Source

src/types/DayPickerBase.ts:67

---

styles?

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

Change the inline styles of the HTML elements.

Source

src/types/DayPickerBase.ts:69

---

title?

optional title: string

Add a title attribute to the container element.

Source

src/types/DayPickerBase.ts:273

---

toDate?

optional toDate: Date

The latest day to end the month navigation.

Source

src/types/DayPickerBase.ts:105

---

toMonth?

optional toMonth: Date

The latest month to end the month navigation.

Source

src/types/DayPickerBase.ts:109

---

toYear?

optional toYear: number

The latest year to end the month navigation.

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.

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 .

Source

src/types/DayPickerBase.ts:184