Skip to main content

Interface: PropsBase

Props for customizing the calendar, handling localization, and managing events. These exclude the selection mode props.

See​

https://daypicker.dev/api/interfaces/PropsBase

Properties​

autoFocus?​

optional autoFocus: boolean

When a selection mode is set, DayPicker will focus the first selected day (if set) or today's date (if not disabled).

Use this prop when you need to focus DayPicker after a user action, for improved accessibility.

See​

https://daypicker.dev/docs/accessibility#autofocus

Defined in​

src/types/props.ts:283

captionLayout?​

optional captionLayout: "dropdown" | "label" | "dropdown-months" | "dropdown-years"

Show dropdowns to navigate between months or years.

  • true: display the dropdowns for both month and year
  • label: display the month and the year as a label. Change the label with the formatCaption formatter.
  • month: display only the dropdown for the months
  • year: display only the dropdown for the years

Note: showing the dropdown will set the start/end months fromYear to 100 years ago, and toYear to the current year.

See​

https://daypicker.dev/docs/customization#caption-layouts

Defined in​

src/types/props.ts:217

className?​

optional className: string

Class name to add to the root element.

Defined in​

src/types/props.ts:61

classNames?​

optional classNames: Partial<ClassNames> & Partial<DeprecatedUI<string>>

Change the class names used by DayPicker.

Use this prop when you need to change the default class names — for example, when importing the style via CSS modules or when using a CSS framework.

See​

https://daypicker.dev/docs/styling

Defined in​

src/types/props.ts:71

components?​

optional components: Partial<CustomComponents>

Change the components used for rendering the calendar elements.

See​

https://daypicker.dev/guides/custom-components

Defined in​

src/types/props.ts:264

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 month and onMonthChange.

Default Value​

The current month

See​

https://daypicker.dev/docs/navigation

Defined in​

src/types/props.ts:103

dir?​

optional dir: string

The text direction of the calendar. Use ltr for left-to-right (default) or rtl for right-to-left.

See​

https://daypicker.dev/docs/translation#rtl-text-direction

Defined in​

src/types/props.ts:330

disabled?​

optional disabled: Matcher | Matcher[]

Apply the disabled modifier to the matching days.

See​

https://daypicker.dev/docs/selection-modes#disabling-dates

Defined in​

src/types/props.ts:289

disableNavigation?​

optional disableNavigation: boolean

Disable the navigation between months. This prop won't hide the navigation: to hide the navigation, use hideNavigation.

See​

https://daypicker.dev/docs/navigation#disablenavigation

Defined in​

src/types/props.ts:202

endMonth?​

optional endMonth: Date

The latest month to end the month navigation.

Since​

9.0.0

See​

https://daypicker.dev/docs/navigation#start-and-end-dates

Defined in​

src/types/props.ts:154

firstWeekContainsDate?​

optional firstWeekContainsDate: 1 | 4

The day of January, which is always in the first week of the year.

See​

https://daypicker.dev/docs/localization#first-week-contains-date

Defined in​

src/types/props.ts:364

fixedWeeks?​

optional fixedWeeks: boolean

Display always 6 weeks per each month, regardless of the month’s number of weeks. Weeks will be filled with the days from the next month.

See​

https://daypicker.dev/docs/customization#fixed-weeks

Defined in​

src/types/props.ts:224

optional footer: ReactNode

Add a footer to the calendar, acting as a live region.

Use this prop to communicate the calendar's status to screen readers. Prefer strings over complex UI elements.

See​

https://daypicker.dev/docs/accessibility#footer

Defined in​

src/types/props.ts:273

formatters?​

optional formatters: Partial<Formatters>

Formatters used to format dates to strings. Use this prop to override the default functions.

See​

https://daypicker.dev/docs/translation#custom-formatters

Defined in​

src/types/props.ts:323

hidden?​

optional hidden: Matcher | Matcher[]

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

See​

https://daypicker.dev/guides/custom-modifiers#hidden-modifier

Defined in​

src/types/props.ts:296

hideNavigation?​

optional hideNavigation: boolean

Hide the navigation buttons. This prop won't disable the navigation: to disable the navigation, use disableNavigation.

Since​

9.0.0

See​

https://daypicker.dev/docs/navigation#hidenavigation

Defined in​

src/types/props.ts:195

hideWeekdays?​

optional hideWeekdays: boolean

Hide the row displaying the weekday row header.

Since​

9.0.0

Defined in​

src/types/props.ts:230

id?​

optional id: string

A unique id to add to the root element.

Defined in​

src/types/props.ts:93

ISOWeek?​

optional ISOWeek: boolean

Use ISO week dates instead of the locale setting. Setting this prop will ignore weekStartsOn and firstWeekContainsDate.

Use the react-day-picker/utc to set the calendar to UTC.

See​

Defined in​

src/types/props.ts:258

labels?​

optional labels: Partial<Labels>

Labels creators to override the defaults. Use this prop to customize the aria-label attributes in DayPicker.

See​

https://daypicker.dev/docs/translation#aria-labels

Defined in​

src/types/props.ts:316

lang?​

optional lang: string

Add the language tag to the container element.

Defined in​

src/types/props.ts:339

locale?​

optional locale: Partial<Locale>

The locale object used to localize dates. Pass a locale from date-fns to localize the calendar.

Example​

import { es } from "date-fns/locale";
  <DayPicker locale={es} />

Default Value​

enUS - The English locale default of date-fns.

See​

https://daypicker.dev/docs/localization

Defined in​

src/types/props.ts:351

mode?​

optional mode: Mode

Enable the selection of a single day, multiple days, or a range of days.

See​

https://daypicker.dev/docs/selection-modes

Defined in​

src/types/props.ts:52

modifiers?​

optional modifiers: Record<string, undefined | Matcher | Matcher[]>

Add modifiers to the matching days.

See​

https://daypicker.dev/guides/custom-modifiers

Defined in​

src/types/props.ts:309

modifiersClassNames?​

optional modifiersClassNames: ModifiersClassNames

Change the class name for the day matching the modifiers.

See​

https://daypicker.dev/guides/custom-modifiers

Defined in​

src/types/props.ts:77

modifiersStyles?​

optional modifiersStyles: ModifiersStyles

Change the class name for the day matching the modifiers.

See​

https://daypicker.dev/guides/custom-modifiers

Defined in​

src/types/props.ts:91

month?​

optional month: Date

The month displayed in the calendar.

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

See​

https://daypicker.dev/docs/navigation

Defined in​

src/types/props.ts:112

nonce?​

optional nonce: string

A cryptographic nonce ("number used once") which can be used by Content Security Policy for the inline style attributes.

Defined in​

src/types/props.ts:335

numberOfMonths?​

optional numberOfMonths: number

The number of displayed months.

Default Value​

1

See​

https://daypicker.dev/docs/customization#multiplemonths

Defined in​

src/types/props.ts:119

onDayBlur?​

optional onDayBlur: DayEventHandler<FocusEvent<Element, Element>>

Event handler when a day is blurred.

Defined in​

src/types/props.ts:414

onDayClick?​

optional onDayClick: DayEventHandler<MouseEvent<Element, MouseEvent>>

Event handler when a day is clicked.

Defined in​

src/types/props.ts:410

onDayFocus?​

optional onDayFocus: DayEventHandler<FocusEvent<Element, Element>>

Event handler when a day is focused.

Defined in​

src/types/props.ts:412

onDayKeyDown?​

optional onDayKeyDown: DayEventHandler<KeyboardEvent<Element>>

Event handler when a key is pressed on a day.

Defined in​

src/types/props.ts:416

onDayMouseEnter?​

optional onDayMouseEnter: DayEventHandler<MouseEvent<Element, MouseEvent>>

Event handler when the mouse enters a day.

Defined in​

src/types/props.ts:418

onDayMouseLeave?​

optional onDayMouseLeave: DayEventHandler<MouseEvent<Element, MouseEvent>>

Event handler when the mouse leaves a day.

Defined in​

src/types/props.ts:420

onMonthChange?​

optional onMonthChange: MonthChangeEventHandler

Event fired when the user navigates between months.

See​

https://daypicker.dev/docs/navigation#onmonthchange

Defined in​

src/types/props.ts:385

onNextClick?​

optional onNextClick: MonthChangeEventHandler

Event handler when the next month button is clicked.

See​

https://daypicker.dev/docs/navigation

Defined in​

src/types/props.ts:392

onPrevClick?​

optional onPrevClick: MonthChangeEventHandler

Event handler when the previous month button is clicked.

See​

https://daypicker.dev/docs/navigation

Defined in​

src/types/props.ts:398

pagedNavigation?​

optional pagedNavigation: boolean

Paginate the month navigation displaying the numberOfMonths at a time.

See​

https://daypicker.dev/docs/customization#multiplemonths

Defined in​

src/types/props.ts:180

required?​

optional required: boolean

Whether the selection is required.

See​

https://daypicker.dev/docs/selection-modes

Defined in​

src/types/props.ts:58

reverseMonths?​

optional reverseMonths: boolean

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

See​

https://daypicker.dev/docs/customization#multiplemonths

Defined in​

src/types/props.ts:187

showOutsideDays?​

optional showOutsideDays: boolean

Show the outside days (days falling in the next or the previous month).

See​

https://daypicker.dev/docs/customization#outside-days

Defined in​

src/types/props.ts:236

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​

https://daypicker.dev/docs/customization#showweeknumber

Defined in​

src/types/props.ts:246

startMonth?​

optional startMonth: Date

The earliest month to start the month navigation.

Since​

9.0.0

See​

https://daypicker.dev/docs/navigation#start-and-end-dates

Defined in​

src/types/props.ts:126

style?​

optional style: CSSProperties

Style to apply to the root element.

Defined in​

src/types/props.ts:79

styles?​

optional styles: Partial<Styles> & Partial<DeprecatedUI<CSSProperties>>

Change the inline styles of the HTML elements.

See​

https://daypicker.dev/docs/styling

Defined in​

src/types/props.ts:85

title?​

optional title: string

Add a title attribute to the container element.

Defined in​

src/types/props.ts:337

today?​

optional today: Date

The today’s date. Default is the current date. This date will get the today modifier to style the day.

See​

https://daypicker.dev/guides/custom-modifiers#today-modifier

Defined in​

src/types/props.ts:303

useAdditionalDayOfYearTokens?​

optional useAdditionalDayOfYearTokens: boolean

Enable YY and YYYY for day of year tokens when formatting or parsing dates.

See​

https://date-fns.org/docs/Unicode-Tokens

Defined in​

src/types/props.ts:378

useAdditionalWeekYearTokens?​

optional useAdditionalWeekYearTokens: boolean

Enable DD and DDDD for week year tokens when formatting or parsing dates.

See​

https://date-fns.org/docs/Unicode-Tokens

Defined in​

src/types/props.ts:371

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​

https://daypicker.dev/docs/localization#first-date-of-the-week

Defined in​

src/types/props.ts:358