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

aria-label?

optional aria-label: string

The aria-label attribute to add to the container element.

Since

9.4.1

See

https://daypicker.dev/guides/accessibility

Defined in

src/types/props.ts:364


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/guides/accessibility#autofocus

Defined in

src/types/props.ts:305


broadcastCalendar?

optional broadcastCalendar: boolean

Display the weeks in the month following the broadcast calendar. Setting this prop will ignore weekStartsOn (always Monday) and showOutsideDays will default to true.

Since

9.4.0

See

Defined in

src/types/props.ts:257


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 startMonth to 100 years ago, and endMonth to the end of the current year.

See

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

Defined in

src/types/props.ts:218


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:286


dateLib?

optional dateLib: Partial<DateLib>

Experimental

Replace the default date library with a custom one. Experimental: not guaranteed to be stable (may not respect semver).

Since

9.0.0

Defined in

src/types/props.ts:491


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:357


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:316


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: 4 | 1

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:426


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:225


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/guides/accessibility#footer

Defined in

src/types/props.ts:295


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:350


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:323


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:231


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.

See

Defined in

src/types/props.ts:265


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:343


lang?

optional lang: string

Add the language tag to the container element.

Defined in

src/types/props.ts:380


locale?

optional locale: Partial<Locale>

The locale object used to localize dates. Pass a locale from react-day-picker/locale to localize the calendar.

Example

import { es } from "react-day-picker/locale";
<DayPicker locale={es} />

Default Value

enUS - The English locale default of date-fns.

See

Defined in

src/types/props.ts:393


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:336


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:376


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


numerals?

optional numerals: Numerals

The numeral system to use when formatting dates.

  • latn: Latin (Western Arabic)
  • arab: Arabic-Indic
  • arabext: Eastern Arabic-Indic (Persian)
  • deva: Devanagari
  • beng: Bengali
  • guru: Gurmukhi
  • gujr: Gujarati
  • orya: Oriya
  • tamldec: Tamil
  • telu: Telugu
  • knda: Kannada
  • mlym: Malayalam

Default Value

latn Latin (Western Arabic)

See

https://daypicker.dev/docs/translation#numeral-systems

Defined in

src/types/props.ts:413


onDayBlur?

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

Event handler when a day is blurred.

Defined in

src/types/props.ts:476


onDayClick?

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

Event handler when a day is clicked.

Defined in

src/types/props.ts:472


onDayFocus?

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

Event handler when a day is focused.

Defined in

src/types/props.ts:474


onDayKeyDown?

optional onDayKeyDown: DayEventHandler<KeyboardEvent<Element>>

Event handler when a key is pressed on a day.

Defined in

src/types/props.ts:478


onDayMouseEnter?

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

Event handler when the mouse enters a day.

Defined in

src/types/props.ts:480


onDayMouseLeave?

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

Event handler when the mouse leaves a day.

Defined in

src/types/props.ts:482


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:447


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:454


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:460


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


role?

optional role: "application" | "dialog"

The role attribute to add to the container element.

Since

9.4.1

See

https://daypicker.dev/guides/accessibility

Defined in

src/types/props.ts:371


showOutsideDays?

optional showOutsideDays: boolean

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

Note: when a broadcast calendar is set, this prop defaults to true.

See

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

Defined in

src/types/props.ts:240


showWeekNumber?

optional showWeekNumber: boolean

Show the week numbers column. Weeks are numbered according to the local week index.

See

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

Defined in

src/types/props.ts:247


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


timeZone?

optional timeZone: string

Experimental

The time zone (IANA or UTC offset) to use in the calendar (experimental). See Wikipedia for the possible values.

Time zones are supported by the TZDate object by the @date-fns/tz package. Please refer to the package documentation for more information.

Since

9.1.1

See

https://daypicker.dev/docs/time-zone

Defined in

src/types/props.ts:280


title?

optional title: string

Add a title attribute to the container element.

Defined in

src/types/props.ts:378


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:330


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:440


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:433


weekStartsOn?

optional weekStartsOn: 0 | 5 | 4 | 1 | 6 | 2 | 3

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:420