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/guides/accessibility#autofocus
Defined inβ
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 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 fromYear to 100 years ago, and toYear to the current year.
Seeβ
https://daypicker.dev/docs/customization#caption-layouts
Defined inβ
className?β
optional
className:string
Class name to add to the root element.
Defined inβ
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β
components?β
optional
components:Partial
<CustomComponents
>
Change the components used for rendering the calendar elements.
Seeβ
https://daypicker.dev/guides/custom-components
Defined inβ
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β
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β
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β
disabled?β
Apply the disabled
modifier to the matching days.
Seeβ
https://daypicker.dev/docs/selection-modes#disabling-dates
Defined inβ
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β
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β
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β
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β
footer?β
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β
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β
hidden?β
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β
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β
hideWeekdays?β
optional
hideWeekdays:boolean
Hide the row displaying the weekday row header.
Sinceβ
9.0.0
Defined inβ
id?β
optional
id:string
A unique id to add to the root element.
Defined inβ
ISOWeek?β
optional
ISOWeek:boolean
Use ISO week dates instead of the locale setting. Setting this prop will
ignore weekStartsOn
and firstWeekContainsDate
.
Seeβ
Defined inβ
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β
lang?β
optional
lang:string
Add the language tag to the container element.
Defined inβ
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β
- https://daypicker.dev/docs/localization
- https://github.com/date-fns/date-fns/tree/main/src/locale for a list of the supported locales
Defined inβ
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β
modifiers?β
optional
modifiers:Record
<string
,undefined
|Matcher
|Matcher
[]>
Add modifiers to the matching days.
Seeβ
https://daypicker.dev/guides/custom-modifiers
Defined inβ
modifiersClassNames?β
optional
modifiersClassNames:ModifiersClassNames
Change the class name for the day matching the modifiers
.
Seeβ
https://daypicker.dev/guides/custom-modifiers
Defined inβ
modifiersStyles?β
optional
modifiersStyles:ModifiersStyles
Change the class name for the day matching the modifiers.
Seeβ
https://daypicker.dev/guides/custom-modifiers
Defined inβ
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β
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β
numberOfMonths?β
optional
numberOfMonths:number
The number of displayed months.
Default Valueβ
1
Seeβ
https://daypicker.dev/docs/customization#multiplemonths
Defined inβ
onDayBlur?β
optional
onDayBlur:DayEventHandler
<FocusEvent
<Element
,Element
>>
Event handler when a day is blurred.
Defined inβ
onDayClick?β
optional
onDayClick:DayEventHandler
<MouseEvent
<Element
,MouseEvent
>>
Event handler when a day is clicked.
Defined inβ
onDayFocus?β
optional
onDayFocus:DayEventHandler
<FocusEvent
<Element
,Element
>>
Event handler when a day is focused.