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