Skip to main content

Interface: DayPickerDefaultProps

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

Hierarchy​

Properties​

captionLayout​

β€’ Optional captionLayout: CaptionLayout

Change the layout of the caption:

  • buttons (default): 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.

Inherited from​

DayPickerBase.captionLayout

Defined in​

types/DayPickerBase.ts:139


className​

β€’ Optional className: string

The CSS class to add to the container element.

Inherited from​

DayPickerBase.className

Defined in​

types/DayPickerBase.ts:45


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​

types/DayPickerBase.ts:52


components​

β€’ Optional components: CustomComponents

A map of components used to create the layout.

Inherited from​

DayPickerBase.components

Defined in​

types/DayPickerBase.ts:161


defaultMonth​

β€’ Optional defaultMonth: Date

The initial month to show in the calendar. Default is the current month.

Use this prop to let DayPicker control the current month. If you need to set the month programmatically, use month and onMonthChange.

Inherited from​

DayPickerBase.defaultMonth

Defined in​

types/DayPickerBase.ts:76


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​

types/DayPickerBase.ts:211


disableNavigation​

β€’ Optional disableNavigation: boolean

Disable the navigation between months.

Inherited from​

DayPickerBase.disableNavigation

Defined in​

types/DayPickerBase.ts:119


disabled​

β€’ Optional disabled: Matcher | Matcher[]

Apply the disabled modifier to the matching days.

Inherited from​

DayPickerBase.disabled

Defined in​

types/DayPickerBase.ts:178


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 to false.

Inherited from​

DayPickerBase.fixedWeeks

Defined in​

types/DayPickerBase.ts:144


β€’ Optional footer: ReactNode

Content to add to the tfoot element.

Inherited from​

DayPickerBase.footer

Defined in​

types/DayPickerBase.ts:164


formatters​

β€’ Optional formatters: Partial<Formatters>

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

Inherited from​

DayPickerBase.formatters

Defined in​

types/DayPickerBase.ts:217


fromDate​

β€’ Optional fromDate: Date

The earliest day to start the month navigation.

Inherited from​

DayPickerBase.fromDate

Defined in​

types/DayPickerBase.ts:95


fromMonth​

β€’ Optional fromMonth: Date

The earliest month to start the month navigation.

Inherited from​

DayPickerBase.fromMonth

Defined in​

types/DayPickerBase.ts:103


fromYear​

β€’ Optional fromYear: number

The earliest year to start the month navigation.

Inherited from​

DayPickerBase.fromYear

Defined in​

types/DayPickerBase.ts:111


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​

types/DayPickerBase.ts:183


hideHead​

β€’ Optional hideHead: boolean

Hide the month’s head displaying the weekday names.

Inherited from​

DayPickerBase.hideHead

Defined in​

types/DayPickerBase.ts:148


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​

types/DayPickerBase.ts:173


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​

types/DayPickerBase.ts:205


locale​

β€’ Optional locale: Locale

The date-fns locale object used to localize dates. Defaults to* en-US.

Inherited from​

DayPickerBase.locale

Defined in​

types/DayPickerBase.ts:199


mode​

β€’ Optional mode: "default"

Defined in​

types/DayPickerDefault.ts:7


modifiers​

β€’ Optional modifiers: DayModifiers

Add modifiers to the matching days.

Inherited from​

DayPickerBase.modifiers

Defined in​

types/DayPickerBase.ts:196


modifiersClassNames​

β€’ Optional modifiersClassNames: ModifiersClassNames

Change the class name for the day matching the modifiers.

Inherited from​

DayPickerBase.modifiersClassNames

Defined in​

types/DayPickerBase.ts:56


modifiersStyles​

β€’ Optional modifiersStyles: ModifiersStyles

Change the inline style for the day matching the modifiers.

Inherited from​

DayPickerBase.modifiersStyles

Defined in​

types/DayPickerBase.ts:69


month​

β€’ Optional month: Date

The month to display in the calendar.

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

Inherited from​

DayPickerBase.month

Defined in​

types/DayPickerBase.ts:83


numberOfMonths​

β€’ Optional numberOfMonths: number

The number of displayed months. Defaults to 1.

Inherited from​

DayPickerBase.numberOfMonths

Defined in​

types/DayPickerBase.ts:91


onDayBlur​

β€’ Optional onDayBlur: DayFocusEventHandler

Inherited from​

DayPickerBase.onDayBlur

Defined in​

types/DayPickerBase.ts:226


onDayClick​

β€’ Optional onDayClick: DayClickEventHandler

Inherited from​

DayPickerBase.onDayClick

Defined in​

types/DayPickerBase.ts:224


onDayFocus​

β€’ Optional onDayFocus: DayFocusEventHandler

Inherited from​

DayPickerBase.onDayFocus

Defined in​

types/DayPickerBase.ts:225


onDayKeyDown​

β€’ Optional onDayKeyDown: DayKeyboardEventHandler

Inherited from​

DayPickerBase.onDayKeyDown

Defined in​

types/DayPickerBase.ts:229


onDayKeyPress​

β€’ Optional onDayKeyPress: DayKeyboardEventHandler

Inherited from​

DayPickerBase.onDayKeyPress

Defined in​

types/DayPickerBase.ts:231


onDayKeyUp​

β€’ Optional onDayKeyUp: DayKeyboardEventHandler

Inherited from​

DayPickerBase.onDayKeyUp

Defined in​

types/DayPickerBase.ts:230


onDayMouseEnter​

β€’ Optional onDayMouseEnter: DayMouseEventHandler

Inherited from​

DayPickerBase.onDayMouseEnter

Defined in​

types/DayPickerBase.ts:227


onDayMouseLeave​

β€’ Optional onDayMouseLeave: DayMouseEventHandler

Inherited from​

DayPickerBase.onDayMouseLeave

Defined in​

types/DayPickerBase.ts:228


onDayTouchCancel​

β€’ Optional onDayTouchCancel: DayTouchEventHandler

Inherited from​

DayPickerBase.onDayTouchCancel

Defined in​

types/DayPickerBase.ts:232


onDayTouchEnd​

β€’ Optional onDayTouchEnd: DayTouchEventHandler

Inherited from​

DayPickerBase.onDayTouchEnd

Defined in​

types/DayPickerBase.ts:233


onDayTouchMove​

β€’ Optional onDayTouchMove: DayTouchEventHandler

Inherited from​

DayPickerBase.onDayTouchMove

Defined in​

types/DayPickerBase.ts:234


onDayTouchStart​

β€’ Optional onDayTouchStart: DayTouchEventHandler

Inherited from​

DayPickerBase.onDayTouchStart

Defined in​

types/DayPickerBase.ts:235


onMonthChange​

β€’ Optional onMonthChange: MonthChangeEventHandler

Event fired when the user navigates between months.

Inherited from​

DayPickerBase.onMonthChange

Defined in​

types/DayPickerBase.ts:87


onNextClick​

β€’ Optional onNextClick: MonthChangeEventHandler

Inherited from​

DayPickerBase.onNextClick

Defined in​

types/DayPickerBase.ts:236


onPrevClick​

β€’ Optional onPrevClick: MonthChangeEventHandler

Inherited from​

DayPickerBase.onPrevClick

Defined in​

types/DayPickerBase.ts:237


onWeekNumberClick​

β€’ Optional onWeekNumberClick: WeekNumberClickEventHandler

Inherited from​

DayPickerBase.onWeekNumberClick

Defined in​

types/DayPickerBase.ts:238


pagedNavigation​

β€’ Optional pagedNavigation: boolean

Paginate the month navigation displaying the numberOfMonths at time.

Inherited from​

DayPickerBase.pagedNavigation

Defined in​

types/DayPickerBase.ts:123


reverseMonths​

β€’ Optional reverseMonths: boolean

Render the months in reversed order (when numberOfMonths is greater than 1) to display the most recent month first.

Inherited from​

DayPickerBase.reverseMonths

Defined in​

types/DayPickerBase.ts:128


selected​

β€’ Optional selected: Matcher | Matcher[]

Apply the selected modifier to the matching days.

Inherited from​

DayPickerBase.selected

Defined in​

types/DayPickerBase.ts:186


showOutsideDays​

β€’ Optional showOutsideDays: boolean

Show the outside days. An outside day is a day falling in the next or the previous month. Default is false.

Inherited from​

DayPickerBase.showOutsideDays

Defined in​

types/DayPickerBase.ts:153


showWeekNumber​

β€’ Optional showWeekNumber: boolean

Show the week numbers column. Default to false.

Inherited from​

DayPickerBase.showWeekNumber

Defined in​

types/DayPickerBase.ts:157


style​

β€’ Optional style: CSSProperties

Style to apply to the container element.

Inherited from​

DayPickerBase.style

Defined in​

types/DayPickerBase.ts:61


styles​

β€’ Optional styles: Partial<Omit<StyledElement<CSSProperties>, InternalModifiersElement>>

Change the inline styles for each UIElement.

Inherited from​

DayPickerBase.styles

Defined in​

types/DayPickerBase.ts:65


toDate​

β€’ Optional toDate: Date

The latest day to end the month navigation.

Inherited from​

DayPickerBase.toDate

Defined in​

types/DayPickerBase.ts:99


toMonth​

β€’ Optional toMonth: Date

The latest month to end the month navigation.

Inherited from​

DayPickerBase.toMonth

Defined in​

types/DayPickerBase.ts:107


toYear​

β€’ Optional toYear: number

The latest year to end the month navigation.

Inherited from​

DayPickerBase.toYear

Defined in​

types/DayPickerBase.ts:115


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​

types/DayPickerBase.ts:192


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.

Inherited from​

DayPickerBase.weekStartsOn

Defined in​

types/DayPickerBase.ts:222