Interface: DayPickerContextValue
The value of the DayPickerContext extends the props from DayPicker with default and cleaned up values.
Extendsβ
Propertiesβ
ISOWeek?β
optional
ISOWeek:boolean
Use ISO week dates instead of the locale setting. Setting this prop will ignore weekStartsOn and firstWeekContainsDate.
Seeβ
https://en.wikipedia.org/wiki/ISO_week_date
Inherited fromβ
Sourceβ
src/types/DayPickerBase.ts:200
captionLayoutβ
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
Overridesβ
Sourceβ
src/contexts/DayPicker/DayPickerContext.tsx:44
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β
Sourceβ
classNamesβ
classNames:
Required
<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.
Overridesβ
Sourceβ
src/contexts/DayPicker/DayPickerContext.tsx:45
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β
Sourceβ
src/types/DayPickerBase.ts:208
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β
Sourceβ
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β
Sourceβ
src/types/DayPickerBase.ts:264
disableNavigation?β
optional
disableNavigation:boolean
Disable the navigation between months.
Default Valueβ
false
Inherited fromβ
DayPickerBase
. disableNavigation
Sourceβ
src/types/DayPickerBase.ts:119
disabled?β
Apply the disabled
modifier to the matching days.
Inherited fromβ
Sourceβ
src/types/DayPickerBase.ts:223
firstWeekContainsDate?β
optional
firstWeekContainsDate:1
|4
The day of January, which is always in the first week of the year. Can be
either Monday (1
) or Thursday (4
).
Seeβ
Inherited fromβ
DayPickerBase
. firstWeekContainsDate
Sourceβ
src/types/DayPickerBase.ts:193
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β
Sourceβ
src/types/DayPickerBase.ts:152
footer?β
optional
footer:ReactNode
Content to add to the table footer element.
Inherited fromβ
Sourceβ
src/types/DayPickerBase.ts:211
formattersβ
formatters:
Formatters
A map of formatters. Use the formatters to override the default formatting functions.
Overridesβ
Sourceβ
src/contexts/DayPicker/DayPickerContext.tsx:46
fromDate?β
optional
fromDate:Date
The earliest day to start the month navigation.
Inherited fromβ
Sourceβ
src/types/DayPickerBase.ts:103
fromMonth?β
optional
fromMonth:Date
The earliest month to start the month navigation.
Inherited fromβ
Sourceβ
src/types/DayPickerBase.ts:107
fromYear?β
optional
fromYear:number
The earliest year to start the month navigation.
Inherited fromβ
Sourceβ
src/types/DayPickerBase.ts:111
hidden?β
Apply the hidden
modifier to the matching days. Will hide them from the
calendar.
Inherited fromβ
Sourceβ
src/types/DayPickerBase.ts:228
hideHead?β
optional
hideHead:boolean
Hide the monthβs head displaying the weekday names.
Default Valueβ
false
Inherited fromβ
Sourceβ
src/types/DayPickerBase.ts:158
id?β
optional
id:string
A unique id to replace the random generated id β used by DayPicker for accessibility.
Inherited fromβ
Sourceβ
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β
Sourceβ
src/types/DayPickerBase.ts:220
labelsβ
labels:
Labels
Labels creators to override the defaults. Use this prop to customize the ARIA labels attributes.
Overridesβ
Sourceβ
src/contexts/DayPicker/DayPickerContext.tsx:47
lang?β
optional
lang:string
Add the language tag to the container element.
Inherited fromβ
Sourceβ
src/types/DayPickerBase.ts:276
localeβ
locale:
Locale
The date-fns locale object used to localize dates.
Default Valueβ
en-US
Overridesβ
Sourceβ
src/contexts/DayPicker/DayPickerContext.tsx:48
max?β
optional
max:number
Sourceβ
src/contexts/DayPicker/DayPickerContext.tsx:41
min?β
optional
min:number
Sourceβ
src/contexts/DayPicker/DayPickerContext.tsx:40
modeβ
mode:
DaySelectionMode
Sourceβ
src/contexts/DayPicker/DayPickerContext.tsx:34
modifiersβ
modifiers:
DayModifiers
Add modifiers to the matching days.
Overridesβ
Sourceβ
src/contexts/DayPicker/DayPickerContext.tsx:50
modifiersClassNamesβ
modifiersClassNames:
ModifiersClassNames
Change the class name for the day matching the modifiers.
Overridesβ
DayPickerBase
. modifiersClassNames
Sourceβ
src/contexts/DayPicker/DayPickerContext.tsx:49
modifiersStyles?β
optional
modifiersStyles:ModifiersStyles
Change the inline style for the day matching the modifiers.
Inherited fromβ
DayPickerBase
. modifiersStyles
Sourceβ
month?β
optional
month:Date
The month displayed in the calendar.
As opposed to DayPickerBase.defaultMonth, use this prop with DayPickerBase.onMonthChange to change the month programmatically.
Inherited fromβ
Sourceβ
nonce?β
optional
nonce:string
A cryptographic nonce ("number used once") which can be used by Content
Security Policy for the inline style
attributes.
Inherited fromβ
Sourceβ
src/types/DayPickerBase.ts:270
numberOfMonthsβ
numberOfMonths:
number
The number of displayed months.
Default Valueβ
1
Overridesβ
DayPickerBase
. numberOfMonths
Sourceβ
src/contexts/DayPicker/DayPickerContext.tsx:51
onDayBlur?β
optional
onDayBlur:DayFocusEventHandler
Event callback fired when the user blurs from a day.
Inherited fromβ
Sourceβ
src/types/DayPickerBase.ts:293
onDayClick?β
optional
onDayClick:DayClickEventHandler
Event callback fired when the user clicks on a day.
Inherited fromβ
Sourceβ
src/types/DayPickerBase.ts:289
onDayFocus?β
optional
onDayFocus:DayFocusEventHandler
Event callback fired when the user focuses on a day.
Inherited fromβ
Sourceβ
src/types/DayPickerBase.ts:291
onDayKeyDown?β
optional
onDayKeyDown:DayKeyboardEventHandler
Event callback fired when the user presses a key on a day.
Inherited fromβ
Sourceβ
src/types/DayPickerBase.ts:299
onDayKeyPress?β
optional
onDayKeyPress:DayKeyboardEventHandler
Event callback fired when the user presses a key on a day.
Inherited fromβ
Sourceβ
src/types/DayPickerBase.ts:303
onDayKeyUp?β
optional
onDayKeyUp:DayKeyboardEventHandler
Event callback fired when the user presses a key on a day.
Inherited fromβ
Sourceβ
src/types/DayPickerBase.ts:301
onDayMouseEnter?β
optional
onDayMouseEnter:DayMouseEventHandler
Event callback fired when the user hovers on a day.
Inherited fromβ
DayPickerBase
. onDayMouseEnter
Sourceβ
src/types/DayPickerBase.ts:295
onDayMouseLeave?β
optional
onDayMouseLeave:DayMouseEventHandler
Event callback fired when the user hovers away from a day.
Inherited fromβ
DayPickerBase
. onDayMouseLeave
Sourceβ
src/types/DayPickerBase.ts:297
onDayPointerEnter?β
optional
onDayPointerEnter:DayPointerEventHandler
Event callback fired when the pointer enters a day.
Inherited fromβ
DayPickerBase
. onDayPointerEnter
Sourceβ
src/types/DayPickerBase.ts:305
onDayPointerLeave?β
optional
onDayPointerLeave:DayPointerEventHandler
Event callback fired when the pointer leaves a day.
Inherited fromβ
DayPickerBase
. onDayPointerLeave
Sourceβ
src/types/DayPickerBase.ts:307
onDayTouchCancel?β
optional
onDayTouchCancel:DayTouchEventHandler
Event callback when a day touch event is canceled.
Inherited fromβ
DayPickerBase
. onDayTouchCancel
Sourceβ
src/types/DayPickerBase.ts:309
onDayTouchEnd?β
optional
onDayTouchEnd:DayTouchEventHandler
Event callback when a day touch event ends.
Inherited fromβ
Sourceβ
src/types/DayPickerBase.ts:311
onDayTouchMove?β
optional
onDayTouchMove:DayTouchEventHandler
Event callback when a day touch event moves.
Inherited fromβ
DayPickerBase
. onDayTouchMove
Sourceβ
src/types/DayPickerBase.ts:313
onDayTouchStart?β
optional
onDayTouchStart:DayTouchEventHandler
Event callback when a day touch event starts.
Inherited fromβ
DayPickerBase
. onDayTouchStart
Sourceβ
src/types/DayPickerBase.ts:315
onMonthChange?β
optional
onMonthChange:MonthChangeEventHandler
Event fired when the user navigates between months.
Inherited fromβ
Sourceβ
onNextClick?β
optional
onNextClick:MonthChangeEventHandler
Event callback fired when the next month button is clicked.
Inherited fromβ
Sourceβ
src/types/DayPickerBase.ts:279
onPrevClick?β
optional
onPrevClick:MonthChangeEventHandler
Event callback fired when the previous month button is clicked.
Inherited fromβ
Sourceβ
src/types/DayPickerBase.ts:281
onSelect?β
optional
onSelect:SelectSingleEventHandler
|SelectMultipleEventHandler
|SelectRangeEventHandler
Sourceβ
src/contexts/DayPicker/DayPickerContext.tsx:35
onWeekNumberClick?β
optional
onWeekNumberClick:WeekNumberClickEventHandler
Event callback fired when the week number is clicked. Requires
showWeekNumbers
set.
Inherited fromβ
DayPickerBase
. onWeekNumberClick
Sourceβ
src/types/DayPickerBase.ts:286
pagedNavigation?β
optional
pagedNavigation:boolean
Paginate the month navigation displaying the numberOfMonths at time.
Default Valueβ
false
Inherited fromβ
DayPickerBase
. pagedNavigation
Sourceβ
src/types/DayPickerBase.ts:125
required?β
optional
required:boolean
Sourceβ
src/contexts/DayPicker/DayPickerContext.tsx:39
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β
Sourceβ
src/types/DayPickerBase.ts:132
selected?β
Apply the selected
modifier to the matching days.
Overridesβ
Sourceβ
src/contexts/DayPicker/DayPickerContext.tsx:42
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β
DayPickerBase
. showOutsideDays
Sourceβ
src/types/DayPickerBase.ts:165
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.
- To change how the week numbers are displayed, use the Formatters prop.
Default Valueβ
false
Seeβ
ISOWeek , weekStartsOn and firstWeekContainsDate.
Inherited fromβ
DayPickerBase
. showWeekNumber
Sourceβ
src/types/DayPickerBase.ts:177
style?β
optional
style:CSSProperties
Style to apply to the container element.
Inherited fromβ
Sourceβ
stylesβ
styles:
Partial
<Omit
<StyledElement
<CSSProperties
>,InternalModifiersElement
>>
Change the inline styles of the HTML elements.
Overridesβ
Sourceβ
src/contexts/DayPicker/DayPickerContext.tsx:52
title?β
optional
title:string
Add a title
attribute to the container element.
Inherited fromβ
Sourceβ
src/types/DayPickerBase.ts:273
toDate?β
optional
toDate:Date
The latest day to end the month navigation.
Inherited fromβ
Sourceβ
src/types/DayPickerBase.ts:105
toMonth?β
optional
toMonth:Date
The latest month to end the month navigation.
Inherited fromβ
Sourceβ
src/types/DayPickerBase.ts:109
toYear?β
optional
toYear:number
The latest year to end the month navigation.
Inherited fromβ
Sourceβ
src/types/DayPickerBase.ts:113
todayβ
today:
Date
The todayβs date. Default is the current date. This Date will get the
today
modifier to style the day.
Overridesβ
Sourceβ
src/contexts/DayPicker/DayPickerContext.tsx:53
weekStartsOn?β
optional
weekStartsOn:0
|2
|1
|3
|4
|5
|6
The index of the first day of the week (0 - Sunday). Overrides the locale's one.
Seeβ
ISOWeek .