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. See also https://en.wikipedia.org/wiki/ISO_week_date.

Setting this prop will ignore weekStartsOn and firstWeekContainsDate.

Defined in​

src/types/DayPickerBase.ts:217

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

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

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

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

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

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

disableNavigation​

• Optional disableNavigation: boolean

Disable the navigation between months.

Default Value

false

Defined in​

src/types/DayPickerBase.ts:137

disabled​

• Optional disabled: Matcher | Matcher[]

Apply the disabled modifier to the matching days.

Defined in​

src/types/DayPickerBase.ts:243

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.

Defined in​

src/types/DayPickerBase.ts:210

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

• Optional footer: ReactNode

Content to add to the table footer element.

Defined in​

src/types/DayPickerBase.ts:229

formatters​

• Optional formatters: Partial<Formatters>

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

Defined in​

src/types/DayPickerBase.ts:288

fromDate​

• Optional fromDate: Date

The earliest day to start the month navigation.

Defined in​

src/types/DayPickerBase.ts:111

fromMonth​

• Optional fromMonth: Date

The earliest month to start the month navigation.

Defined in​

src/types/DayPickerBase.ts:119

fromYear​

• Optional fromYear: number

The earliest year to start the month navigation.

Defined in​

src/types/DayPickerBase.ts:127

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

hideHead​

• Optional hideHead: boolean

Hide the month’s head displaying the weekday names.

Default Value

false

Defined in​

src/types/DayPickerBase.ts:177

id​

• Optional id: string

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

Defined in​

src/types/DayPickerBase.ts:81

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

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

locale​

• Optional locale: Locale

The date-fns locale object used to localize dates.

Default Value

en-US

Defined in​

src/types/DayPickerBase.ts:270

modifiers​

• Optional modifiers: DayModifiers

Add modifiers to the matching days.

Defined in​

src/types/DayPickerBase.ts:263

modifiersClassNames​

• Optional modifiersClassNames: ModifiersClassNames

Change the class name for the day matching the modifiers.

Defined in​

src/types/DayPickerBase.ts:62

modifiersStyles​

• Optional modifiersStyles: ModifiersStyles

Change the inline style for the day matching the modifiers.

Defined in​

src/types/DayPickerBase.ts:75

month​

• Optional month: Date

The month displayed in the calendar.

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

Defined in​

src/types/DayPickerBase.ts:97

numberOfMonths​

• Optional numberOfMonths: number

The number of displayed months.

Default Value

1

Defined in​

src/types/DayPickerBase.ts:107

onDayBlur​

• Optional onDayBlur: DayFocusEventHandler

Defined in​

src/types/DayPickerBase.ts:292

onDayClick​

• Optional onDayClick: DayClickEventHandler

Defined in​

src/types/DayPickerBase.ts:290

onDayFocus​

• Optional onDayFocus: DayFocusEventHandler

Defined in​

src/types/DayPickerBase.ts:291

onDayKeyDown​

• Optional onDayKeyDown: DayKeyboardEventHandler

Defined in​

src/types/DayPickerBase.ts:295

onDayKeyPress​

• Optional onDayKeyPress: DayKeyboardEventHandler

Defined in​

src/types/DayPickerBase.ts:297

onDayKeyUp​

• Optional onDayKeyUp: DayKeyboardEventHandler

Defined in​

src/types/DayPickerBase.ts:296

onDayMouseEnter​

• Optional onDayMouseEnter: DayMouseEventHandler

Defined in​

src/types/DayPickerBase.ts:293

onDayMouseLeave​

• Optional onDayMouseLeave: DayMouseEventHandler

Defined in​

src/types/DayPickerBase.ts:294

onDayPointerEnter​

• Optional onDayPointerEnter: DayPointerEventHandler

Defined in​

src/types/DayPickerBase.ts:298

onDayPointerLeave​

• Optional onDayPointerLeave: DayPointerEventHandler

Defined in​

src/types/DayPickerBase.ts:299

onDayTouchCancel​

• Optional onDayTouchCancel: DayTouchEventHandler

Defined in​

src/types/DayPickerBase.ts:300

onDayTouchEnd​

• Optional onDayTouchEnd: DayTouchEventHandler

Defined in​

src/types/DayPickerBase.ts:301

onDayTouchMove​

• Optional onDayTouchMove: DayTouchEventHandler

Defined in​

src/types/DayPickerBase.ts:302

onDayTouchStart​

• Optional onDayTouchStart: DayTouchEventHandler

Defined in​

src/types/DayPickerBase.ts:303

onMonthChange​

• Optional onMonthChange: MonthChangeEventHandler

Event fired when the user navigates between months.

Defined in​

src/types/DayPickerBase.ts:101

onNextClick​

• Optional onNextClick: MonthChangeEventHandler

Defined in​

src/types/DayPickerBase.ts:304

onPrevClick​

• Optional onPrevClick: MonthChangeEventHandler

Defined in​

src/types/DayPickerBase.ts:305

onWeekNumberClick​

• Optional onWeekNumberClick: WeekNumberClickEventHandler

Defined in​

src/types/DayPickerBase.ts:306

pagedNavigation​

• Optional pagedNavigation: boolean

Paginate the month navigation displaying the numberOfMonths at time.

Default Value

false

Defined in​

src/types/DayPickerBase.ts:144

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

selected​

• Optional selected: Matcher | Matcher[]

Apply the selected modifier to the matching days.

Defined in​

src/types/DayPickerBase.ts:253

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

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

style​

• Optional style: CSSProperties

Style to apply to the container element.

Defined in​

src/types/DayPickerBase.ts:67

styles​

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

Change the inline styles of the HTML elements.

Defined in​

src/types/DayPickerBase.ts:71

toDate​

• Optional toDate: Date

The latest day to end the month navigation.

Defined in​

src/types/DayPickerBase.ts:115

toMonth​

• Optional toMonth: Date

The latest month to end the month navigation.

Defined in​

src/types/DayPickerBase.ts:123

toYear​

• Optional toYear: number

The latest year to end the month navigation.

Defined in​

src/types/DayPickerBase.ts:131

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

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.

Defined in​

src/types/DayPickerBase.ts:202