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​

packages/react-day-picker/src/types/DayPickerBase.ts:183


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​

packages/react-day-picker/src/types/DayPickerBase.ts:145


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​

packages/react-day-picker/src/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​

packages/react-day-picker/src/types/DayPickerBase.ts:52


components​

β€’ Optional components: CustomComponents

Map of components used to create the layout. Look at the components source to understand how internal components are built.

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:188


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 []] and [onMonthChange.

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:81


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​

packages/react-day-picker/src/types/DayPickerBase.ts:238


disableNavigation​

β€’ Optional disableNavigation: boolean

Disable the navigation between months.

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:124


disabled​

β€’ Optional disabled: Matcher | Matcher[]

Apply the disabled modifier to the matching days.

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:205


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

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:176


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​

packages/react-day-picker/src/types/DayPickerBase.ts:150


β€’ Optional footer: ReactNode

Content to add to the tfoot element.

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:191


formatters​

β€’ Optional formatters: Partial<Formatters>

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

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:244


fromDate​

β€’ Optional fromDate: Date

The earliest day to start the month navigation.

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:100


fromMonth​

β€’ Optional fromMonth: Date

The earliest month to start the month navigation.

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:108


fromYear​

β€’ Optional fromYear: number

The earliest year to start the month navigation.

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:116


hidden​

β€’ Optional hidden: Matcher | Matcher[]

Apply the hidden modifier to the matching days. Will hide them from the calendar.

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:210


hideHead​

β€’ Optional hideHead: boolean

Hide the month’s head displaying the weekday names.

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:154


id​

β€’ Optional id: string

An unique id to replace the random generated id, used by DayPicker for accessibility.

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:74


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​

packages/react-day-picker/src/types/DayPickerBase.ts:200


labels​

β€’ Optional labels: Partial<Labels>

Labels creators to override the defaults. Use this prop to customize the ARIA labels attributes.

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:232


locale​

β€’ Optional locale: Locale

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

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:226


modifiers​

β€’ Optional modifiers: DayModifiers

Add modifiers to the matching days.

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:223


modifiersClassNames​

β€’ Optional modifiersClassNames: ModifiersClassNames

Change the class name for the day matching the modifiers.

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:56


modifiersStyles​

β€’ Optional modifiersStyles: ModifiersStyles

Change the inline style for the day matching the modifiers.

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:69


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​

packages/react-day-picker/src/types/DayPickerBase.ts:88


numberOfMonths​

β€’ Optional numberOfMonths: number

The number of displayed months. Defaults to 1.

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:96


onDayBlur​

β€’ Optional onDayBlur: DayFocusEventHandler

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:248


onDayClick​

β€’ Optional onDayClick: DayClickEventHandler

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:246


onDayFocus​

β€’ Optional onDayFocus: DayFocusEventHandler

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:247


onDayKeyDown​

β€’ Optional onDayKeyDown: DayKeyboardEventHandler

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:251


onDayKeyPress​

β€’ Optional onDayKeyPress: DayKeyboardEventHandler

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:253


onDayKeyUp​

β€’ Optional onDayKeyUp: DayKeyboardEventHandler

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:252


onDayMouseEnter​

β€’ Optional onDayMouseEnter: DayMouseEventHandler

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:249


onDayMouseLeave​

β€’ Optional onDayMouseLeave: DayMouseEventHandler

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:250


onDayTouchCancel​

β€’ Optional onDayTouchCancel: DayTouchEventHandler

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:254


onDayTouchEnd​

β€’ Optional onDayTouchEnd: DayTouchEventHandler

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:255


onDayTouchMove​

β€’ Optional onDayTouchMove: DayTouchEventHandler

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:256


onDayTouchStart​

β€’ Optional onDayTouchStart: DayTouchEventHandler

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:257


onMonthChange​

β€’ Optional onMonthChange: MonthChangeEventHandler

Event fired when the user navigates between months.

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:92


onNextClick​

β€’ Optional onNextClick: MonthChangeEventHandler

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:258


onPrevClick​

β€’ Optional onPrevClick: MonthChangeEventHandler

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:259


onWeekNumberClick​

β€’ Optional onWeekNumberClick: WeekNumberClickEventHandler

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:260


pagedNavigation​

β€’ Optional pagedNavigation: boolean

Paginate the month navigation displaying the numberOfMonths at time.

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:128


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​

packages/react-day-picker/src/types/DayPickerBase.ts:133


selected​

β€’ Optional selected: Matcher | Matcher[]

Apply the selected modifier to the matching days.

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:213


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​

packages/react-day-picker/src/types/DayPickerBase.ts:159


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.

Default Value

false

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:166


style​

β€’ Optional style: CSSProperties

Style to apply to the container element.

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:61


styles​

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

Change the inline styles for each UIElement.

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:65


toDate​

β€’ Optional toDate: Date

The latest day to end the month navigation.

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:104


toMonth​

β€’ Optional toMonth: Date

The latest month to end the month navigation.

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:112


toYear​

β€’ Optional toYear: number

The latest year to end the month navigation.

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:120


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​

packages/react-day-picker/src/types/DayPickerBase.ts:219


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​

packages/react-day-picker/src/types/DayPickerBase.ts:170