Skip to main content

Interface: DayPickerDefaultProps

The props for the DayPicker component when using mode="default" or undefined.

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.

Inherited from

DayPickerBase.ISOWeek

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

Inherited from

DayPickerBase.captionLayout

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.

Inherited from

DayPickerBase.className

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.

Inherited from

DayPickerBase.classNames

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.

Inherited from

DayPickerBase.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

Inherited from

DayPickerBase.defaultMonth

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.

Inherited from

DayPickerBase.dir

Defined in

src/types/DayPickerBase.ts:282


disableNavigation

Optional disableNavigation: boolean

Disable the navigation between months.

Default Value

false

Inherited from

DayPickerBase.disableNavigation

Defined in

src/types/DayPickerBase.ts:137


disabled

Optional disabled: Matcher | Matcher[]

Apply the disabled modifier to the matching days.

Inherited from

DayPickerBase.disabled

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.

Inherited from

DayPickerBase.firstWeekContainsDate

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

Inherited from

DayPickerBase.fixedWeeks

Defined in

src/types/DayPickerBase.ts:171


Optional footer: ReactNode

Content to add to the table footer element.

Inherited from

DayPickerBase.footer

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.

Inherited from

DayPickerBase.formatters

Defined in

src/types/DayPickerBase.ts:288


fromDate

Optional fromDate: Date

The earliest day to start the month navigation.

Inherited from

DayPickerBase.fromDate

Defined in

src/types/DayPickerBase.ts:111


fromMonth

Optional fromMonth: Date

The earliest month to start the month navigation.

Inherited from

DayPickerBase.fromMonth

Defined in

src/types/DayPickerBase.ts:119


fromYear

Optional fromYear: number

The earliest year to start the month navigation.

Inherited from

DayPickerBase.fromYear

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.

Inherited from

DayPickerBase.hidden

Defined in

src/types/DayPickerBase.ts:248


hideHead

Optional hideHead: boolean

Hide the month’s head displaying the weekday names.

Default Value

false

Inherited from

DayPickerBase.hideHead

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.

Inherited from

DayPickerBase.id

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.

Inherited from

DayPickerBase.initialFocus

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.

Inherited from

DayPickerBase.labels

Defined in

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

Defined in

src/types/DayPickerBase.ts:270


mode

Optional mode: "default"

Defined in

src/types/DayPickerDefault.ts:7


modifiers

Optional modifiers: DayModifiers

Add modifiers to the matching days.

Inherited from

DayPickerBase.modifiers

Defined in

src/types/DayPickerBase.ts:263


modifiersClassNames

Optional modifiersClassNames: ModifiersClassNames

Change the class name for the day matching the modifiers.

Inherited from

DayPickerBase.modifiersClassNames

Defined in

src/types/DayPickerBase.ts:62


modifiersStyles

Optional modifiersStyles: ModifiersStyles

Change the inline style for the day matching the modifiers.

Inherited from

DayPickerBase.modifiersStyles

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.

Inherited from

DayPickerBase.month

Defined in

src/types/DayPickerBase.ts:97


numberOfMonths

Optional numberOfMonths: number

The number of displayed months.

Default Value

1

Inherited from

DayPickerBase.numberOfMonths

Defined in

src/types/DayPickerBase.ts:107


onDayBlur

Optional onDayBlur: DayFocusEventHandler

Inherited from

DayPickerBase.onDayBlur

Defined in

src/types/DayPickerBase.ts:292


onDayClick

Optional onDayClick: DayClickEventHandler

Inherited from

DayPickerBase.onDayClick

Defined in

src/types/DayPickerBase.ts:290


onDayFocus

Optional onDayFocus: DayFocusEventHandler

Inherited from

DayPickerBase.onDayFocus

Defined in

src/types/DayPickerBase.ts:291


onDayKeyDown

Optional onDayKeyDown: DayKeyboardEventHandler

Inherited from

DayPickerBase.onDayKeyDown

Defined in

src/types/DayPickerBase.ts:295


onDayKeyPress

Optional onDayKeyPress: DayKeyboardEventHandler

Inherited from

DayPickerBase.onDayKeyPress

Defined in

src/types/DayPickerBase.ts:297


onDayKeyUp

Optional onDayKeyUp: DayKeyboardEventHandler

Inherited from

DayPickerBase.onDayKeyUp

Defined in

src/types/DayPickerBase.ts:296


onDayMouseEnter

Optional onDayMouseEnter: DayMouseEventHandler

Inherited from

DayPickerBase.onDayMouseEnter

Defined in

src/types/DayPickerBase.ts:293


onDayMouseLeave

Optional onDayMouseLeave: DayMouseEventHandler

Inherited from

DayPickerBase.onDayMouseLeave

Defined in

src/types/DayPickerBase.ts:294


onDayPointerEnter

Optional onDayPointerEnter: DayPointerEventHandler

Inherited from

DayPickerBase.onDayPointerEnter

Defined in

src/types/DayPickerBase.ts:298


onDayPointerLeave

Optional onDayPointerLeave: DayPointerEventHandler

Inherited from

DayPickerBase.onDayPointerLeave

Defined in

src/types/DayPickerBase.ts:299


onDayTouchCancel

Optional onDayTouchCancel: DayTouchEventHandler

Inherited from

DayPickerBase.onDayTouchCancel

Defined in

src/types/DayPickerBase.ts:300


onDayTouchEnd

Optional onDayTouchEnd: DayTouchEventHandler

Inherited from

DayPickerBase.onDayTouchEnd

Defined in

src/types/DayPickerBase.ts:301


onDayTouchMove

Optional onDayTouchMove: DayTouchEventHandler

Inherited from

DayPickerBase.onDayTouchMove

Defined in

src/types/DayPickerBase.ts:302


onDayTouchStart

Optional onDayTouchStart: DayTouchEventHandler

Inherited from

DayPickerBase.onDayTouchStart

Defined in

src/types/DayPickerBase.ts:303


onMonthChange

Optional onMonthChange: MonthChangeEventHandler

Event fired when the user navigates between months.

Inherited from

DayPickerBase.onMonthChange

Defined in

src/types/DayPickerBase.ts:101


onNextClick

Optional onNextClick: MonthChangeEventHandler

Inherited from

DayPickerBase.onNextClick

Defined in

src/types/DayPickerBase.ts:304


onPrevClick

Optional onPrevClick: MonthChangeEventHandler

Inherited from

DayPickerBase.onPrevClick

Defined in

src/types/DayPickerBase.ts:305


onWeekNumberClick

Optional onWeekNumberClick: WeekNumberClickEventHandler

Inherited from

DayPickerBase.onWeekNumberClick

Defined in

src/types/DayPickerBase.ts:306


pagedNavigation

Optional pagedNavigation: boolean

Paginate the month navigation displaying the numberOfMonths at time.

Default Value

false

Inherited from

DayPickerBase.pagedNavigation

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

Inherited from

DayPickerBase.reverseMonths

Defined in

src/types/DayPickerBase.ts:151


selected

Optional selected: Matcher | Matcher[]

Apply the selected modifier to the matching days.

Inherited from

DayPickerBase.selected

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

Inherited from

DayPickerBase.showOutsideDays

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

Inherited from

DayPickerBase.showWeekNumber

Defined in

src/types/DayPickerBase.ts:196


style

Optional style: CSSProperties

Style to apply to the container element.

Inherited from

DayPickerBase.style

Defined in

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

Defined in

src/types/DayPickerBase.ts:71


toDate

Optional toDate: Date

The latest day to end the month navigation.

Inherited from

DayPickerBase.toDate

Defined in

src/types/DayPickerBase.ts:115


toMonth

Optional toMonth: Date

The latest month to end the month navigation.

Inherited from

DayPickerBase.toMonth

Defined in

src/types/DayPickerBase.ts:123


toYear

Optional toYear: number

The latest year to end the month navigation.

Inherited from

DayPickerBase.toYear

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.

Inherited from

DayPickerBase.today

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.

Inherited from

DayPickerBase.weekStartsOn

Defined in

src/types/DayPickerBase.ts:202