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.