Skip to main content

Interface: DayPickerBase

The base props for the DayPicker component and the DayPickerContext.

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

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

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.

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.

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.

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

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.

Defined in​

src/types/DayPickerBase.ts:292

disableNavigation​

• Optional disableNavigation: boolean

Disable the navigation between months.

Default Value

false

Defined in​

src/types/DayPickerBase.ts:140

disabled​

• Optional disabled: Matcher | Matcher[]

Apply the disabled modifier to the matching days.

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

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

Defined in​

src/types/DayPickerBase.ts:174

• Optional footer: ReactNode

Content to add to the table footer element.

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.

Defined in​

src/types/DayPickerBase.ts:286

fromDate​

• Optional fromDate: Date

The earliest day to start the month navigation.

Defined in​

src/types/DayPickerBase.ts:114

fromMonth​

• Optional fromMonth: Date

The earliest month to start the month navigation.

Defined in​

src/types/DayPickerBase.ts:122

fromYear​

• Optional fromYear: number

The earliest year to start the month navigation.

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.

Defined in​

src/types/DayPickerBase.ts:252

hideHead​

• Optional hideHead: boolean

Hide the month’s head displaying the weekday names.

Default Value

false

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.

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.

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.

Defined in​

src/types/DayPickerBase.ts:280

lang​

• Optional lang: string

Add the language tag to the container element.

Defined in​

src/types/DayPickerBase.ts:308

locale​

• Optional locale: Locale

The date-fns locale object used to localize dates.

Default Value

en-US

Defined in​

src/types/DayPickerBase.ts:274

modifiers​

• Optional modifiers: DayModifiers

Add modifiers to the matching days.

Defined in​

src/types/DayPickerBase.ts:267

modifiersClassNames​

• Optional modifiersClassNames: ModifiersClassNames

Change the class name for the day matching the modifiers.

Defined in​

src/types/DayPickerBase.ts:65

modifiersStyles​

• Optional modifiersStyles: ModifiersStyles

Change the inline style for the day matching the modifiers.

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.

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.

Defined in​

src/types/DayPickerBase.ts:298

numberOfMonths​

• Optional numberOfMonths: number

The number of displayed months.

Default Value

1

Defined in​

src/types/DayPickerBase.ts:110

onDayBlur​

• Optional onDayBlur: DayFocusEventHandler

Event callback fired when the user blurs from a day.

Defined in​

src/types/DayPickerBase.ts:335

onDayClick​

• Optional onDayClick: DayClickEventHandler

Event callback fired when the user clicks on a day.

Defined in​

src/types/DayPickerBase.ts:327

onDayFocus​

• Optional onDayFocus: DayFocusEventHandler

Event callback fired when the user focuses on a day.

Defined in​

src/types/DayPickerBase.ts:331

onDayKeyDown​

• Optional onDayKeyDown: DayKeyboardEventHandler

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

Defined in​

src/types/DayPickerBase.ts:347

onDayKeyPress​

• Optional onDayKeyPress: DayKeyboardEventHandler

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

Defined in​

src/types/DayPickerBase.ts:355

onDayKeyUp​

• Optional onDayKeyUp: DayKeyboardEventHandler

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

Defined in​

src/types/DayPickerBase.ts:351

onDayMouseEnter​

• Optional onDayMouseEnter: DayMouseEventHandler

Event callback fired when the user hovers on a day.

Defined in​

src/types/DayPickerBase.ts:339

onDayMouseLeave​

• Optional onDayMouseLeave: DayMouseEventHandler

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

Defined in​

src/types/DayPickerBase.ts:343

onDayPointerEnter​

• Optional onDayPointerEnter: DayPointerEventHandler

Event callback fired when the pointer enters a day.

Defined in​

src/types/DayPickerBase.ts:359

onDayPointerLeave​

• Optional onDayPointerLeave: DayPointerEventHandler

Event callback fired when the pointer leaves a day.

Defined in​

src/types/DayPickerBase.ts:363

onDayTouchCancel​

• Optional onDayTouchCancel: DayTouchEventHandler

Event callback when a day touch event is canceled.

Defined in​

src/types/DayPickerBase.ts:367

onDayTouchEnd​

• Optional onDayTouchEnd: DayTouchEventHandler

Event callback when a day touch event ends.

Defined in​

src/types/DayPickerBase.ts:371

onDayTouchMove​

• Optional onDayTouchMove: DayTouchEventHandler

Event callback when a day touch event moves.

Defined in​

src/types/DayPickerBase.ts:375

onDayTouchStart​

• Optional onDayTouchStart: DayTouchEventHandler

Event callback when a day touch event starts.

Defined in​

src/types/DayPickerBase.ts:379

onMonthChange​

• Optional onMonthChange: MonthChangeEventHandler

Event fired when the user navigates between months.

Defined in​

src/types/DayPickerBase.ts:104

onNextClick​

• Optional onNextClick: MonthChangeEventHandler

Event callback fired when the next month button is clicked.

Defined in​

src/types/DayPickerBase.ts:313

onPrevClick​

• Optional onPrevClick: MonthChangeEventHandler

Event callback fired when the previous month button is clicked.

Defined in​

src/types/DayPickerBase.ts:317

onWeekNumberClick​

• Optional onWeekNumberClick: WeekNumberClickEventHandler

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

Defined in​

src/types/DayPickerBase.ts:322

pagedNavigation​

• Optional pagedNavigation: boolean

Paginate the month navigation displaying the numberOfMonths at time.

Default Value

false

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

Defined in​

src/types/DayPickerBase.ts:154

selected​

• Optional selected: Matcher | Matcher[]

Apply the selected modifier to the matching days.

Defined in​

src/types/DayPickerBase.ts:257

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

Defined in​

src/types/DayPickerBase.ts:199

style​

• Optional style: CSSProperties

Style to apply to the container element.

Defined in​

src/types/DayPickerBase.ts:70

styles​

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

Change the inline styles of the HTML elements.

Defined in​

src/types/DayPickerBase.ts:74

title​

• Optional title: string

Add a title attribute to the container element.

Defined in​

src/types/DayPickerBase.ts:303

toDate​

• Optional toDate: Date

The latest day to end the month navigation.

Defined in​

src/types/DayPickerBase.ts:118

toMonth​

• Optional toMonth: Date

The latest month to end the month navigation.

Defined in​

src/types/DayPickerBase.ts:126

toYear​

• Optional toYear: number

The latest year to end the month navigation.

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.

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.

Defined in​

src/types/DayPickerBase.ts:205