Interface: DayPickerSingleProps
The props for the DayPicker component when using mode="single".
Hierarchy
↳
DayPickerSingleProps
Properties
ISOWeek
• Optional ISOWeek: boolean
Use ISO week dates instead of the locale setting. See also https://en.wikipedia.org/wiki/ISO_week_date.
Setting this prop will ignore weekStartsOn and firstWeekContainsDate.
Inherited from
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:208
captionLayout
• Optional captionLayout: CaptionLayout
Change the layout of the caption:
buttons: display prev/right buttonsdropdown: display drop-downs to change the month and the year
Note: the dropdown layout is available only when fromDate,
fromMonth orfromYear and toDate, toMonth or toYear are set.
Default Value
buttons
Inherited from
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:164
className
• Optional className: string
The CSS class to add to the container element. To change the name of the
class instead, use classNames.root.
Inherited from
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:51
classNames
• Optional classNames: Partial<StyledElement<string>>
Change the class names of the HTML elements.
Use this prop when you need to change the default class names — for example when using CSS modules.
Inherited from
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:58
components
• Optional components: CustomComponents
Map of components used to create the layout. Look at the components source to understand how internal components are built and provide your custom components.
Inherited from
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:215
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 []] and [onMonthChange.
Default Value
The current month
Inherited from
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:90
dir
• Optional dir: string
The text direction of the calendar. Use ltr for left-to-right (default)
or rtl for right-to-left.
Inherited from
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:273
disableNavigation
• Optional disableNavigation: boolean
Disable the navigation between months.
Default Value
false
Inherited from
DayPickerBase.disableNavigation
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:137
disabled
• Optional disabled: Matcher | Matcher[]
Apply the disabled modifier to the matching days.
Inherited from
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:234
firstWeekContainsDate
• Optional firstWeekContainsDate: 1 | 2 | 3 | 4 | 5 | 6 | 7
The day of January, which is always in the first week of the year. See also https://date-fns.org/docs/getWeek and https://en.wikipedia.org/wiki/Week#Numbering
Inherited from
DayPickerBase.firstWeekContainsDate
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:201
fixedWeeks
• Optional fixedWeeks: boolean
Display six weeks per months, regardless the month’s number of weeks. To use this prop, showOutsideDays must be set.
Default Value
false
Inherited from
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:171
footer
• Optional footer: ReactNode
Content to add to the table footer element.
Inherited from
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:220
formatters
• Optional formatters: Partial<Formatters>
A map of formatters. Use the formatters to override the default formatting functions.
Inherited from
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:279
fromDate
• Optional fromDate: Date
The earliest day to start the month navigation.
Inherited from
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:111
fromMonth
• Optional fromMonth: Date
The earliest month to start the month navigation.
Inherited from
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:119
fromYear
• Optional fromYear: number
The earliest year to start the month navigation.
Inherited from
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:127
hidden
• Optional hidden: Matcher | Matcher[]
Apply the hidden modifier to the matching days. Will hide them from the
calendar.
Inherited from
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:239
hideHead
• Optional hideHead: boolean
Hide the month’s head displaying the weekday names.
Default Value
false
Inherited from
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:177
id
• Optional id: string
A unique id to replace the random generated id – used by DayPicker for accessibility.
Inherited from
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:81
initialFocus
• Optional initialFocus: boolean
When a selection mode is set, DayPicker will focus the first selected day (if set) or the today's date (if not disabled).
Use this prop when you need to focus DayPicker after a user actions, for improved accessibility.
Inherited from
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:229
labels
• Optional labels: Partial<Labels>
Labels creators to override the defaults. Use this prop to customize the ARIA labels attributes.
Inherited from
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:267
locale
• Optional locale: Locale
The date-fns locale object used to localize dates.
Default Value
en-US
Inherited from
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:261
mode
• mode: "single"
Defined in
packages/react-day-picker/src/types/DayPickerSingle.ts:10
modifiers
• Optional modifiers: DayModifiers
Add modifiers to the matching days.
Inherited from
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:254
modifiersClassNames
• Optional modifiersClassNames: ModifiersClassNames
Change the class name for the day matching the modifiers.
Inherited from
DayPickerBase.modifiersClassNames
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:62
modifiersStyles
• Optional modifiersStyles: ModifiersStyles
Change the inline style for the day matching the modifiers.
Inherited from
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:75
month
• Optional month: Date
The month displayed in the calendar.
As opposed to defaultMonth, use this prop with onMonthChange to change the month programmatically.
Inherited from
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:97
numberOfMonths
• Optional numberOfMonths: number
The number of displayed months.
Default Value
1
Inherited from
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:107
onDayBlur
• Optional onDayBlur: DayFocusEventHandler
Inherited from
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:283
onDayClick
• Optional onDayClick: DayClickEventHandler
Inherited from
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:281
onDayFocus
• Optional onDayFocus: DayFocusEventHandler
Inherited from
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:282
onDayKeyDown
• Optional onDayKeyDown: DayKeyboardEventHandler
Inherited from
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:286
onDayKeyPress
• Optional onDayKeyPress: DayKeyboardEventHandler
Inherited from
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:288
onDayKeyUp
• Optional onDayKeyUp: DayKeyboardEventHandler
Inherited from
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:287
onDayMouseEnter
• Optional onDayMouseEnter: DayMouseEventHandler
Inherited from
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:284
onDayMouseLeave
• Optional onDayMouseLeave: DayMouseEventHandler
Inherited from
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:285
onDayPointerEnter
• Optional onDayPointerEnter: DayPointerEventHandler
Inherited from
DayPickerBase.onDayPointerEnter
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:289
onDayPointerLeave
• Optional onDayPointerLeave: DayPointerEventHandler
Inherited from
DayPickerBase.onDayPointerLeave
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:290
onDayTouchCancel
• Optional onDayTouchCancel: DayTouchEventHandler
Inherited from
DayPickerBase.onDayTouchCancel
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:291
onDayTouchEnd
• Optional onDayTouchEnd: DayTouchEventHandler
Inherited from
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:292
onDayTouchMove
• Optional onDayTouchMove: DayTouchEventHandler
Inherited from
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:293
onDayTouchStart
• Optional onDayTouchStart: DayTouchEventHandler
Inherited from
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:294
onMonthChange
• Optional onMonthChange: MonthChangeEventHandler
Event fired when the user navigates between months.
Inherited from
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:101
onNextClick
• Optional onNextClick: MonthChangeEventHandler
Inherited from
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:295
onPrevClick
• Optional onPrevClick: MonthChangeEventHandler
Inherited from
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:296
onSelect
• Optional onSelect: SelectSingleEventHandler
Event fired when a day is selected.
Defined in
packages/react-day-picker/src/types/DayPickerSingle.ts:14
onWeekNumberClick
• Optional onWeekNumberClick: WeekNumberClickEventHandler
Inherited from
DayPickerBase.onWeekNumberClick
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:297
pagedNavigation
• Optional pagedNavigation: boolean
Paginate the month navigation displaying the numberOfMonths at time.
Default Value
false
Inherited from
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:144
required
• Optional required: boolean
Make the selection required.
Defined in
packages/react-day-picker/src/types/DayPickerSingle.ts:16
reverseMonths
• Optional reverseMonths: boolean
Render the months in reversed order (when numberOfMonths is greater
than 1) to display the most recent month first.
Default Value
false
Inherited from
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:151
selected
• Optional selected: Date
The selected day.
Overrides
Defined in
packages/react-day-picker/src/types/DayPickerSingle.ts:12
showOutsideDays
• Optional showOutsideDays: boolean
Show the outside days. An outside day is a day falling in the next or the previous month.
Default Value
false
Inherited from
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:184
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.
Default Value
false
Inherited from
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:191
style
• Optional style: CSSProperties
Style to apply to the container element.
Inherited from
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:67
styles
• Optional styles: Partial<Omit<StyledElement<CSSProperties>, InternalModifiersElement>>
Change the inline styles of the HTML elements.
Inherited from
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:71
toDate
• Optional toDate: Date
The latest day to end the month navigation.
Inherited from
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:115
toMonth
• Optional toMonth: Date
The latest month to end the month navigation.
Inherited from
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:123
toYear
• Optional toYear: number
The latest year to end the month navigation.
Inherited from
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:131
today
• Optional today: Date
The today’s date. Default is the current date. This Date will get the
today modifier to style the day.
Inherited from
Defined in
packages/react-day-picker/src/types/DayPickerBase.ts:250
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.