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
- https://daypicker.dev/docs/localization#broadcast-calendar
- https://en.wikipedia.org/wiki/Broadcast_calendar
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 yearlabel
: display the month and the year as a label. Change the label with theformatCaption
formatter.month
: display only the dropdown for the monthsyear
: 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?
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
footer?
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?
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
- https://daypicker.dev/docs/localization
- https://github.com/date-fns/date-fns/tree/main/src/locale for a list of the supported locales
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-Indicarabext
: Eastern Arabic-Indic (Persian)deva
: Devanagaribeng
: Bengaliguru
: Gurmukhigujr
: Gujaratiorya
: Oriyatamldec
: Tamiltelu
: Teluguknda
: Kannadamlym
: 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