Calendar
A date field component that allows users to enter and edit date.
Example
Usage
Calendar Props
| Prop | Type | Default |
|---|---|---|
mode | enum | — |
required | boolean | — |
className | string | — |
classNames | see more | — |
modifiersClassNames | ModifiersClassNames | — |
style | CSSProperties | — |
styles | see more | — |
modifiersStyles | ModifiersStyles | — |
id | string | — |
defaultMonth | Date | — |
month | Date | — |
numberOfMonths | number | — |
startMonth | Date | — |
fromDate | Date | — |
fromMonth | Date | — |
fromYear | number | — |
endMonth | Date | — |
toDate | Date | — |
toMonth | Date | — |
toYear | number | — |
pagedNavigation | boolean | — |
reverseMonths | boolean | — |
hideNavigation | boolean | — |
disableNavigation | boolean | — |
captionLayout | enum | "label" |
reverseYears | boolean | — |
navLayout | enum | — |
fixedWeeks | boolean | — |
hideWeekdays | boolean | — |
showOutsideDays | boolean | "true" |
showWeekNumber | boolean | — |
animate | boolean | — |
broadcastCalendar | boolean | — |
ISOWeek | boolean | — |
timeZone | string | — |
noonSafe | boolean | — |
components | Partial<CustomComponents> | — |
footer | ReactNode | — |
autoFocus | boolean | — |
initialFocus | boolean | — |
disabled | Matcher | Matcher[] | — |
hidden | Matcher | Matcher[] | — |
today | Date | — |
modifiers | Record<string, Matcher | Matcher[]> | — |
labels | Partial<Labels> | — |
formatters | Partial<Formatters> | — |
dir | string | — |
aria-label | string | — |
aria-labelledby | string | — |
role | enum | — |
nonce | string | — |
title | string | — |
lang | string | — |
locale | Partial<DayPickerLocale> | — |
numerals | enum | — |
weekStartsOn | enum | — |
firstWeekContainsDate | enum | — |
useAdditionalWeekYearTokens | boolean | — |
useAdditionalDayOfYearTokens | boolean | — |
onMonthChange | MonthChangeEventHandler | — |
onNextClick | MonthChangeEventHandler | — |
onPrevClick | MonthChangeEventHandler | — |
onWeekNumberClick | any | — |
onDayClick | see more | — |
onDayFocus | see more | — |
onDayBlur | see more | — |
onDayKeyDown | DayEventHandler<KeyboardEvent<Element>> | — |
onDayMouseEnter | see more | — |
onDayMouseLeave | see more | — |
dateLib | Partial<DateLib> | — |
onDayKeyUp | DayEventHandler<KeyboardEvent<Element>> | — |
onDayKeyPress | DayEventHandler<KeyboardEvent<Element>> | — |
onDayPointerEnter | DayEventHandler<PointerEvent<Element>> | — |
onDayPointerLeave | DayEventHandler<PointerEvent<Element>> | — |
onDayTouchCancel | DayEventHandler<TouchEvent<Element>> | — |
onDayTouchEnd | DayEventHandler<TouchEvent<Element>> | — |
onDayTouchMove | DayEventHandler<TouchEvent<Element>> | — |
onDayTouchStart | DayEventHandler<TouchEvent<Element>> | — |
selected | Date | Date[] | DateRange | — |
onSelect | see more | — |
variant | any | "empty" |
min | number | — |
max | number | — |
excludeDisabled | boolean | — |
Calendar.DayButton Props
| Prop | Type | Default |
|---|---|---|
type | enum | — |
className | string | — |
children | ReactNode | — |
day* | CalendarDay | — |
modifiers* | Modifiers | — |