Skip to main content

Interface: DayPickerBase

The base props for the DayPicker component.

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.

Defined in​

types/DayPickerBase.ts:139


className​

β€’ Optional className: string

The CSS class to add to the container element.

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.

Defined in​

types/DayPickerBase.ts:52


components​

β€’ Optional components: CustomComponents

A map of components used to create the layout.

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.

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.

Defined in​

types/DayPickerBase.ts:211


disableNavigation​

β€’ Optional disableNavigation: boolean

Disable the navigation between months.

Defined in​

types/DayPickerBase.ts:119


disabled​

β€’ Optional disabled: Matcher | Matcher[]

Apply the disabled modifier to the matching days.

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.

Defined in​

types/DayPickerBase.ts:144


β€’ Optional footer: ReactNode

Content to add to the tfoot element.

Defined in​

types/DayPickerBase.ts:164


formatters​

β€’ Optional formatters: Partial<Formatters>

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

Defined in​

types/DayPickerBase.ts:217


fromDate​

β€’ Optional fromDate: Date

The earliest day to start the month navigation.

Defined in​

types/DayPickerBase.ts:95


fromMonth​

β€’ Optional fromMonth: Date

The earliest month to start the month navigation.

Defined in​

types/DayPickerBase.ts:103


fromYear​

β€’ Optional fromYear: number

The earliest year to start the month navigation.

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.

Defined in​

types/DayPickerBase.ts:183


hideHead​

β€’ Optional hideHead: boolean

Hide the month’s head displaying the weekday names.

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.

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.

Defined in​

types/DayPickerBase.ts:205


locale​

β€’ Optional locale: Locale

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

Defined in​

types/DayPickerBase.ts:199


modifiers​

β€’ Optional modifiers: DayModifiers

Add modifiers to the matching days.

Defined in​

types/DayPickerBase.ts:196


modifiersClassNames​

β€’ Optional modifiersClassNames: ModifiersClassNames

Change the class name for the day matching the modifiers.

Defined in​

types/DayPickerBase.ts:56


modifiersStyles​

β€’ Optional modifiersStyles: ModifiersStyles

Change the inline style for the day matching the modifiers.

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.

Defined in​

types/DayPickerBase.ts:83


numberOfMonths​

β€’ Optional numberOfMonths: number

The number of displayed months. Defaults to 1.

Defined in​

types/DayPickerBase.ts:91


onDayBlur​

β€’ Optional onDayBlur: DayFocusEventHandler

Defined in​

types/DayPickerBase.ts:226


onDayClick​

β€’ Optional onDayClick: DayClickEventHandler

Defined in​

types/DayPickerBase.ts:224


onDayFocus​

β€’ Optional onDayFocus: DayFocusEventHandler

Defined in​

types/DayPickerBase.ts:225


onDayKeyDown​

β€’ Optional onDayKeyDown: DayKeyboardEventHandler

Defined in​

types/DayPickerBase.ts:229


onDayKeyPress​

β€’ Optional onDayKeyPress: DayKeyboardEventHandler

Defined in​

types/DayPickerBase.ts:231


onDayKeyUp​

β€’ Optional onDayKeyUp: DayKeyboardEventHandler

Defined in​

types/DayPickerBase.ts:230


onDayMouseEnter​

β€’ Optional onDayMouseEnter: DayMouseEventHandler

Defined in​

types/DayPickerBase.ts:227


onDayMouseLeave​

β€’ Optional onDayMouseLeave: DayMouseEventHandler

Defined in​

types/DayPickerBase.ts:228


onDayTouchCancel​

β€’ Optional onDayTouchCancel: DayTouchEventHandler

Defined in​

types/DayPickerBase.ts:232


onDayTouchEnd​

β€’ Optional onDayTouchEnd: DayTouchEventHandler

Defined in​

types/DayPickerBase.ts:233


onDayTouchMove​

β€’ Optional onDayTouchMove: DayTouchEventHandler

Defined in​

types/DayPickerBase.ts:234


onDayTouchStart​

β€’ Optional onDayTouchStart: DayTouchEventHandler

Defined in​

types/DayPickerBase.ts:235


onMonthChange​

β€’ Optional onMonthChange: MonthChangeEventHandler

Event fired when the user navigates between months.

Defined in​

types/DayPickerBase.ts:87


onNextClick​

β€’ Optional onNextClick: MonthChangeEventHandler

Defined in​

types/DayPickerBase.ts:236


onPrevClick​

β€’ Optional onPrevClick: MonthChangeEventHandler

Defined in​

types/DayPickerBase.ts:237


onWeekNumberClick​

β€’ Optional onWeekNumberClick: WeekNumberClickEventHandler

Defined in​

types/DayPickerBase.ts:238


pagedNavigation​

β€’ Optional pagedNavigation: boolean

Paginate the month navigation displaying the numberOfMonths at time.

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.

Defined in​

types/DayPickerBase.ts:128


selected​

β€’ Optional selected: Matcher | Matcher[]

Apply the selected modifier to the matching days.

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.

Defined in​

types/DayPickerBase.ts:153


showWeekNumber​

β€’ Optional showWeekNumber: boolean

Show the week numbers column. Default to false.

Defined in​

types/DayPickerBase.ts:157


style​

β€’ Optional style: CSSProperties

Style to apply to the container element.

Defined in​

types/DayPickerBase.ts:61


styles​

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

Change the inline styles for each UIElement.

Defined in​

types/DayPickerBase.ts:65


toDate​

β€’ Optional toDate: Date

The latest day to end the month navigation.

Defined in​

types/DayPickerBase.ts:99


toMonth​

β€’ Optional toMonth: Date

The latest month to end the month navigation.

Defined in​

types/DayPickerBase.ts:107


toYear​

β€’ Optional toYear: number

The latest year to end the month navigation.

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.

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.

Defined in​

types/DayPickerBase.ts:222