Skip to main content

Interface: PropsBase

Defined in: src/types/props.ts:46

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

Defined in: src/types/props.ts:364

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

Since

9.4.1

See

https://daypicker.dev/guides/accessibility


autoFocus?

optional autoFocus: boolean

Defined in: src/types/props.ts:305

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


broadcastCalendar?

optional broadcastCalendar: boolean

Defined in: src/types/props.ts:257

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


captionLayout?

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

Defined in: src/types/props.ts:218

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


className?

optional className: string

Defined in: src/types/props.ts:61

Class name to add to the root element.


classNames?

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

Defined in: src/types/props.ts:71

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


components?

optional components: Partial<CustomComponents>

Defined in: src/types/props.ts:286

Change the components used for rendering the calendar elements.

See

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


dateLib?

optional dateLib: Partial<DateLib>

Defined in: src/types/props.ts:491

Experimental

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

Since

9.0.0


defaultMonth?

optional defaultMonth: Date

Defined in: src/types/props.ts:103

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


dir?

optional dir: string

Defined in: src/types/props.ts:357

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


disabled?

optional disabled: Matcher | Matcher[]

Defined in: src/types/props.ts:316

Apply the disabled modifier to the matching days.

See

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


disableNavigation?

optional disableNavigation: boolean

Defined in: src/types/props.ts:202

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


endMonth?

optional endMonth: Date

Defined in: src/types/props.ts:154

The latest month to end the month navigation.

Since

9.0.0

See

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


firstWeekContainsDate?

optional firstWeekContainsDate: 4 | 1

Defined in: src/types/props.ts:426

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

See

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


fixedWeeks?

optional fixedWeeks: boolean

Defined in: src/types/props.ts:225

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


optional footer: ReactNode

Defined in: src/types/props.ts:295

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


formatters?

optional formatters: Partial<Formatters>

Defined in: src/types/props.ts:350

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

See

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


hidden?

optional hidden: Matcher | Matcher[]

Defined in: src/types/props.ts:323

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

See

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


hideNavigation?

optional hideNavigation: boolean

Defined in: src/types/props.ts:195

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


hideWeekdays?

optional hideWeekdays: boolean

Defined in: src/types/props.ts:231

Hide the row displaying the weekday row header.

Since

9.0.0


id?

optional id: string

Defined in: src/types/props.ts:93

A unique id to add to the root element.


ISOWeek?

optional ISOWeek: boolean

Defined in: src/types/props.ts:265

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

See


labels?

optional labels: Partial<Labels>

Defined in: src/types/props.ts:343

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


lang?

optional lang: string

Defined in: src/types/props.ts:380

Add the language tag to the container element.


locale?

optional locale: Partial<Locale>

Defined in: src/types/props.ts:393

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


mode?

optional mode: Mode

Defined in: src/types/props.ts:52

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

See

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


modifiers?

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

Defined in: src/types/props.ts:336

Add modifiers to the matching days.

See

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


modifiersClassNames?

optional modifiersClassNames: ModifiersClassNames

Defined in: src/types/props.ts:77

Change the class name for the day matching the modifiers.

See

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


modifiersStyles?

optional modifiersStyles: ModifiersStyles

Defined in: src/types/props.ts:91

Change the class name for the day matching the modifiers.

See

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


month?

optional month: Date

Defined in: src/types/props.ts:112

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


nonce?

optional nonce: string

Defined in: src/types/props.ts:376

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


numberOfMonths?

optional numberOfMonths: number

Defined in: src/types/props.ts:119

The number of displayed months.

Default Value

1

See

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


numerals?

optional numerals: Numerals

Defined in: src/types/props.ts:413

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


onDayBlur?

optional onDayBlur: DayEventHandler<FocusEvent>

Defined in: src/types/props.ts:476

Event handler when a day is blurred.


onDayClick?

optional onDayClick: DayEventHandler<MouseEvent>

Defined in: src/types/props.ts:472

Event handler when a day is clicked.


onDayFocus?

optional onDayFocus: DayEventHandler<FocusEvent>

Defined in: src/types/props.ts:474

Event handler when a day is focused.


onDayKeyDown?

optional onDayKeyDown: DayEventHandler<KeyboardEvent>

Defined in: src/types/props.ts:478

Event handler when a key is pressed on a day.


onDayMouseEnter?

optional onDayMouseEnter: DayEventHandler<MouseEvent>

Defined in: src/types/props.ts:480

Event handler when the mouse enters a day.


onDayMouseLeave?

optional onDayMouseLeave: DayEventHandler<MouseEvent>

Defined in: src/types/props.ts:482

Event handler when the mouse leaves a day.


onMonthChange?

optional onMonthChange: MonthChangeEventHandler

Defined in: src/types/props.ts:447

Event fired when the user navigates between months.

See

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


onNextClick?

optional onNextClick: MonthChangeEventHandler

Defined in: src/types/props.ts:454

Event handler when the next month button is clicked.

See

https://daypicker.dev/docs/navigation


onPrevClick?

optional onPrevClick: MonthChangeEventHandler

Defined in: src/types/props.ts:460

Event handler when the previous month button is clicked.

See

https://daypicker.dev/docs/navigation


pagedNavigation?

optional pagedNavigation: boolean

Defined in: src/types/props.ts:180

Paginate the month navigation displaying the numberOfMonths at a time.

See

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


required?

optional required: boolean

Defined in: src/types/props.ts:58

Whether the selection is required.

See

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


reverseMonths?

optional reverseMonths: boolean

Defined in: src/types/props.ts:187

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

See

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


role?

optional role: "application" | "dialog"

Defined in: src/types/props.ts:371

The role attribute to add to the container element.

Since

9.4.1

See

https://daypicker.dev/guides/accessibility


showOutsideDays?

optional showOutsideDays: boolean

Defined in: src/types/props.ts:240

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


showWeekNumber?

optional showWeekNumber: boolean

Defined in: src/types/props.ts:247

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

See

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


startMonth?

optional startMonth: Date

Defined in: src/types/props.ts:126

The earliest month to start the month navigation.

Since

9.0.0

See

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


style?

optional style: CSSProperties

Defined in: src/types/props.ts:79

Style to apply to the root element.


styles?

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

Defined in: src/types/props.ts:85

Change the inline styles of the HTML elements.

See

https://daypicker.dev/docs/styling


timeZone?

optional timeZone: string

Defined in: src/types/props.ts:280

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


title?

optional title: string

Defined in: src/types/props.ts:378

Add a title attribute to the container element.


today?

optional today: Date

Defined in: src/types/props.ts:330

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


useAdditionalDayOfYearTokens?

optional useAdditionalDayOfYearTokens: boolean

Defined in: src/types/props.ts:440

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

See

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


useAdditionalWeekYearTokens?

optional useAdditionalWeekYearTokens: boolean

Defined in: src/types/props.ts:433

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

See

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


weekStartsOn?

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

Defined in: src/types/props.ts:420

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