@choice-ui
DocsComponentsTokens

MonthCalendar

A calendar component for date selection with support for single, range, and multiple date picking

Storybook@choice-ui/calendarView Source

Installation

Terminal
pnpm add @choice-ui/calendar

Import

Component.tsx
import { type MonthCalendarProps, MonthCalendar, DateInput, DateRangeInput, type TimeCalendarProps, TimeCalendar, TimeInput, TimeRangeInput, type QuarterCalendarProps, QuarterCalendar, type YearCalendarProps, YearCalendar, dateUtils, generateWeekdayNames, generateCalendarDays, formatMonthTitle, calculateWeekNumbers, inferSelectionMode, inferMonthFromValue, isCalendarValueEqual, LOCALE_MAP, resolveLocale, getSupportedLocales, isChineseLocale, type DateComparisonMode, type DateParts, createTimeZoneContext, isSameDayInTimeZone, isSameMonthInTimeZone, isSameYearInTimeZone, isSameWeekInTimeZone, isTodayInTimeZone, isWithinRange, getDateParts, getDateKey, areDatesEqual, clearTimeZoneCache, parseMonthName, englishMonths, chineseMonths, validateDateRange, validateTimeRange, isValidDateExists, getLastDayOfMonth, smartCorrectDate, smartCorrectYear, quickValidateDate, handleShortcuts, parseRelativeDate, parseExtendedRelativeDate, parseNaturalLanguage, getLocaleKey, parseEnglishDate, getLocale, detectDateFormat, type ParseResult, type DetailedParseResult, type ParseOptions, parseDate, parseDate, parseDate, getPredictionInfo, tryRelaxedParsing, smartParseDate, parseDate, tryRelaxedParsing, smartParseDate, getPredictionInfo, type ParseOptions, type ParseResult, type DetailedParseResult, getEnhancedPrediction, type PredictionResult, validateDateRange, validateTimeRange, isValidDateExists, smartCorrectDate, smartCorrectYear, quickValidateDate, getLastDayOfMonth, getLocale, detectDateFormat, parseMonthName, parseEnglishDate, parseRelativeDate, parseExtendedRelativeDate, parseNaturalLanguage, getLocaleKey, handleShortcuts, extractDigits, convertTwoDigitYear, isValidMonthDay, canBeMonthDay, isReasonableYear, type NumericParseResult, parseYYMMDD, parseYYYYMMDD, parse3Digits, yearUtils, quarterUtils, getQuarterMonths, createQuarter, getCurrentQuarter, getYearQuarters, isQuarterEqual, formatQuarter, getQuarterDateRange, dateToTimeString, timeStringToDate, normalizeTimeValue, smartParseTimeValue, tryRelaxedTimeParsing, createTimeValue, timeToDate, dateToTime, formatTimeValue, formatHourValue, formatMinuteValue, generateHourOptions, generateMinuteOptions, isTimeEqual, findClosestValidTime, generateTimeOptions, createTimeToday, defaultLocaleMap, naturalLanguageMap, relativeDatePatterns, commonDateFormats, commonTimeFormats, parserConfig, parseCache, useDateInput, useTimeInput, type BaseYearProps, type YearItem, type YearLayoutProps, type YearNavigationProps, type BaseQuarterProps, type Quarter, type QuarterItem, type QuarterLayoutProps, type QuarterNavigationProps, type BaseCalendarProps, type CalendarValue, type CalendarState, type CalendarLayoutProps, type BaseDateProps, type DateInputValue, type DateDataFormat, type DateRange, type DateParserOptions, type DateInteractionProps, type BaseTimeProps, type Time, type TimeInputValue, type TimeDataFormat, type TimeParserOptions, type TimeLayout, type TimeInteractionProps, type TimeOptionItem, type SmartInputOptions, type StepProps, type NaturalLanguageMap, type RelativeDatePattern } from "@choice-ui/calendar"

Basic

`MonthCalendar` is a comprehensive calendar component for displaying and selecting dates within a month view.
Features:
- Multiple selection modes: single, multiple, and range selection - Comprehensive internationalization support with locale-aware formatting - Flexible week start configuration (Sunday through Saturday) - Week number display with ISO standard support - Date highlighting and disabling capabilities - Light and dark theme variants - Dynamic or fixed grid layout options - Outside day display control - Today highlighting and navigation - Keyboard navigation and accessibility support - Customizable weekday names and formatting
Usage:
- Use for date selection in forms, filters, and scheduling interfaces - Ideal for booking systems, event planners, and date range pickers - Combine with input components for complete date selection workflows - Leverage multiple selection modes for different use cases
Best Practices:
- Choose appropriate selection mode based on user needs - Consider locale and cultural differences in week start preferences - Use highlighting and disabling to guide user selection - Provide clear visual feedback for selected dates
Accessibility:
- Full keyboard navigation with arrow keys and space/enter selection - Screen reader friendly with proper ARIA labels and descriptions - High contrast support for all states and variants - Semantic HTML structure with proper date semantics Default: Shows the basic MonthCalendar with standard configuration. - Demonstrates default month view with Chinese locale and Monday week start. - Shows today highlighting and outside day display. - Provides a foundation for calendar implementation.
2026年1月
一
二
三
四
五
六
日
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8

With Week Numbers

WithWeekNumbers: Demonstrates MonthCalendar with week numbers displayed.
- Shows ISO standard week numbers in the left column. - Displays how week numbers enhance date navigation and reference. - Useful for applications requiring week-based scheduling or reporting.
2026年1月
一
二
三
四
五
六
日
1
29
30
31
1
2
3
4
2
5
6
7
8
9
10
11
3
12
13
14
15
16
17
18
4
19
20
21
22
23
24
25
5
26
27
28
29
30
31
1
6
2
3
4
5
6
7
8

Display the left week number column, using the ISO week number standard (Monday starts)

Single Select

SingleSelect: Demonstrates single date selection mode with light and dark variants.
- Shows how to select one date with visual feedback and state management. - Displays both light and dark theme variants side by side. - Useful for basic date selection in forms and filters.
2026年1月
一
二
三
四
五
六
日
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
2026年1月
一
二
三
四
五
六
日
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8

Multi Select

MultiSelect: Demonstrates multiple date selection mode.
- Shows how to select multiple individual dates with visual feedback. - Displays selected dates count and list in both light and dark variants. - Useful for event scheduling, availability selection, or batch operations.
2026年1月
一
二
三
四
五
六
日
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
2026年1月
一
二
三
四
五
六
日
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8

Range Select

RangeSelect: Demonstrates date range selection mode.
- Shows how to select a continuous date range with start and end dates. - Displays range selection with visual highlighting between dates. - Useful for booking systems, vacation planning, or report period selection.
2026年1月
一
二
三
四
五
六
日
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
2026年1月
一
二
三
四
五
六
日
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8

Disabled Dates

DisabledDates: Demonstrates date disabling functionality.
- Shows how to disable specific dates (past dates, 15th, 25th of month). - Displays disabled dates with visual indicators and prevented interaction. - Useful for availability systems, booking restrictions, or business rule enforcement.
2026年1月
一
二
三
四
五
六
日
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
2026年1月
一
二
三
四
五
六
日
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8

Disabled dates include: yesterday, the day before yesterday, the 15th and 25th of each month

Highlight Dates

HighlightDates: Demonstrates date highlighting functionality.
- Shows how to highlight specific dates (1st, 10th, 20th, 30th of month). - Displays highlighted dates with special visual styling to draw attention. - Useful for marking holidays, deadlines, important events, or special dates.
2026年1月
一
二
三
四
五
六
日
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
2026年1月
一
二
三
四
五
六
日
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8

Highlighted dates include: the 1st, 10th, 20th and 30th of each month

Custom Weekdays

CustomWeekdays: Demonstrates custom weekday name configuration.
- Shows how to override default locale-generated weekday names. - Displays custom abbreviated weekday names in English format. - Useful for applications requiring specific weekday formatting or branding.
January 2026
Sun
Mon
Tue
Wed
Thu
Fri
Sat
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8

Use custom weekday name array to override automatic generation of multiple languages

Multi Language

MultiLanguage: Demonstrates comprehensive internationalization support.
- Shows MonthCalendar in 4 different languages (Chinese, English, Japanese, Korean). - Displays locale-specific weekday names, month names, and date formatting. - Useful for testing international compatibility and understanding localization features.

中文 (zh-CN)

2026年1月
一
二
三
四
五
六
日
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8

English (en-US)

January 2026
Mon
Tue
Wed
Thu
Fri
Sat
Sun
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8

日本語 (ja-JP)

1月 2026
月
火
水
木
金
土
日
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8

한국어 (ko-KR)

1월 2026
월
화
수
목
금
토
일
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8

Week Start Options

WeekStartOptions: Demonstrates different week start day configurations with week numbers.
- Shows calendars starting on Sunday, Monday, and Saturday. - Displays how week start affects layout while maintaining ISO week numbers. - Useful for accommodating different cultural preferences for week structure.

Starts on Sunday (0) + Week Numbers

January 2026
Sun
Mon
Tue
Wed
Thu
Fri
Sat
52
28
29
30
31
1
2
3
1
4
5
6
7
8
9
10
2
11
12
13
14
15
16
17
3
18
19
20
21
22
23
24
4
25
26
27
28
29
30
31
5
1
2
3
4
5
6
7

Starts on Monday (1) + Week Numbers

January 2026
Mon
Tue
Wed
Thu
Fri
Sat
Sun
1
29
30
31
1
2
3
4
2
5
6
7
8
9
10
11
3
12
13
14
15
16
17
18
4
19
20
21
22
23
24
25
5
26
27
28
29
30
31
1
6
2
3
4
5
6
7
8

Starts on Saturday (6) + Week Numbers

January 2026
Sat
Sun
Mon
Tue
Wed
Thu
Fri
52
27
28
29
30
31
1
2
1
3
4
5
6
7
8
9
2
10
11
12
13
14
15
16
3
17
18
19
20
21
22
23
4
24
25
26
27
28
29
30
5
31
1
2
3
4
5
6

The week number is calculated based on the ISO standard, and the different week start days will affect the calendar layout but not the week number calculation

Dynamic Rows

DynamicRows: Demonstrates dynamic row layout without fixed 6-row grid.
- Shows calendar with 4-6 rows based on actual month requirements. - Displays variable height calendar that adapts to month structure. - Useful for space-efficient layouts or when consistent height isn't required.
2026年1月
一
二
三
四
五
六
日
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1

Dynamic row mode: display 4-6 rows based on the actual needs of the month, and the height will change

Unified Interface

UnifiedInterface: Demonstrates all three selection modes with unified interface.
- Shows single, multiple, and range selection modes side by side. - Displays how the same component API handles different selection types. - Useful for understanding the component's versatility and selection mode differences.

Single Select

January 2026
Mon
Tue
Wed
Thu
Fri
Sat
Sun
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8

Selected: 1/24/2026

Multi Select

January 2026
Mon
Tue
Wed
Thu
Fri
Sat
Sun
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8

Selected: 2 dates

Range Select

January 2026
Mon
Tue
Wed
Thu
Fri
Sat
Sun
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8

Selected range: 1/24/2026 - 1/31/2026

API reference

MonthCalendarTypeDefault
className
string
|
undefined
 -
currentMonth
Date
|
undefined
 -
dateComparisonMode
undefined
|
"exact-time"
|
"date-only"
 -
defaultValue
CalendarValue
|
undefined
 -
disabledDates
Date[]
|
undefined
 -
fixedGrid
boolean
|
undefined
 -
highlightDates
Date[]
|
undefined
 -
highlightToday
boolean
|
undefined
 -
locale
string
|
Locale
|
undefined
 -
maxDate
Date
|
undefined
 -
minDate
Date
|
undefined
 -
onChange
((value: CalendarValue) => void)
|
undefined
 -
onMonthChange
((month: Date) => void)
|
undefined
 -
readOnly
boolean
|
undefined
 -
selectionMode
undefined
|
"single"
|
"multiple"
|
"range"
 -
showOutsideDays
boolean
|
undefined
 -
showWeekNumbers
boolean
|
undefined
 -
timeZone
string
|
undefined
 -
value
CalendarValue
|
undefined
 -
weekStartsOn
undefined
|
0
|
1
|
2
|
3
|
4
|
5
|
6
 -
weekdayNames
string[]
|
undefined
 -
direction
undefined
|
"horizontal"
|
"vertical"
 -
variant
undefined
|
"default"
|
"dark"
 -
DateInputValueTypeDefault
value
Date
|
null
|
undefined
 -
onChange
((date: Date
|
null) => void)
|
undefined
 -
format
string
|
undefined
 -
size
undefined
|
"default"
|
"large"
 -
selected
boolean
|
undefined
 -
className
string
|
undefined
 -
focusSelection
undefined
|
"none"
|
"all"
|
"end"
 -
onIsEditingChange
((isEditing: boolean) => void)
|
undefined
 -
variant
undefined
|
"default"
|
"light"
|
"dark"
|
"reset"
 -
enableCache
boolean
|
undefined
true
enableKeyboardNavigation
boolean
|
undefined
true
enablePrediction
boolean
|
undefined
false
enableProfiling
boolean
|
undefined
false
locale
string
|
Locale
|
undefined
 -
maxDate
Date
|
undefined
 -
minDate
Date
|
undefined
 -
onEnterKeyDown
(() => void)
|
undefined
 -
prefixElement
ReactNode -
suffixElement
ReactNode -
DateRangeInputTypeDefault
endDisabled
boolean
|
undefined
 -
endPlaceholder
string
|
undefined
 -
endSuffixElement
ReactNode -
endValue
Date
|
null
|
undefined
 -
format
string
|
undefined
 -
locale
string
|
Locale
|
undefined
 -
maxDate
Date
|
undefined
 -
minDate
Date
|
undefined
 -
onEndChange
((date: Date
|
null) => void)
|
undefined
 -
onEndFocus
(() => void)
|
undefined
 -
onEnterKeyDown
(() => void)
|
undefined
 -
onStartChange
((date: Date
|
null) => void)
|
undefined
 -
onStartFocus
(() => void)
|
undefined
 -
rangePrecision
number
|
undefined
1 - Minimum unit is 1 day
startDisabled
boolean
|
undefined
 -
startPlaceholder
string
|
undefined
 -
startSuffixElement
ReactNode -
startValue
Date
|
null
|
undefined
 -
size
undefined
|
"default"
|
"large"
 -
selected
boolean
|
undefined
 -
className
string
|
undefined
 -
focusSelection
undefined
|
"none"
|
"all"
|
"end"
 -
onIsEditingChange
((isEditing: boolean) => void)
|
undefined
 -
variant
undefined
|
"default"
|
"light"
|
"dark"
|
"reset"
 -
TimeCalendarTypeDefault
className
string
|
undefined
 -
hourStep
number
|
undefined
 -
minuteStep
number
|
undefined
 -
open
boolean
|
undefined
 -
onOpenChange
((open: boolean) => void)
|
undefined
 -
closeOnSelect
boolean
|
undefined
 -
triggerRef
RefObject<HTMLElement>
|
undefined
 -
triggerSelector
string
|
undefined
 -
defaultValue
Date
|
null
|
undefined
 -
disabled
boolean
|
undefined
 -
format
string
|
undefined
 -
locale
string
|
Locale
|
undefined
 -
maxTime
Date
|
undefined
 -
minTime
Date
|
undefined
 -
onChange
((time: Date
|
null) => void)
|
undefined
 -
readOnly
boolean
|
undefined
 -
value
Date
|
null
|
undefined
 -
metaStep
number
|
undefined
 -
shiftStep
number
|
undefined
 -
step
number
|
undefined
 -
offset
number
|
undefined
 -
placement
undefined
|
"top"
|
"right"
|
"bottom"
|
"left"
|
"top-start"
|
"top-end"
|
"right-start"
|
"right-end"
|
"bottom-start"
|
"bottom-end"
|
"left-start"
|
"left-end"
 -
matchTriggerWidth
boolean
|
undefined
 -
variant
undefined
|
"default"
|
"light"
|
"reset"
 -
TimeInputValueTypeDefault
value
Date
|
null
|
undefined
 -
onChange
((time: Date
|
null) => void)
|
undefined
 -
format
string
|
undefined
 -
defaultValue
Date
|
null
|
undefined
 -
step
number
|
undefined
 -
size
undefined
|
"default"
|
"large"
 -
selected
boolean
|
undefined
 -
className
string
|
undefined
 -
focusSelection
undefined
|
"none"
|
"all"
|
"end"
 -
onIsEditingChange
((isEditing: boolean) => void)
|
undefined
 -
variant
undefined
|
"default"
|
"light"
|
"dark"
|
"reset"
 -
prefixElement
ReactNode -
suffixElement
ReactNode -
locale
string
|
Locale
|
undefined
 -
maxTime
Date
|
undefined
 -
minTime
Date
|
undefined
 -
metaStep
number
|
undefined
 -
shiftStep
number
|
undefined
 -
enableCache
boolean
|
undefined
 -
enableKeyboardNavigation
boolean
|
undefined
 -
enableProfiling
boolean
|
undefined
 -
onEnterKeyDown
(() => void)
|
undefined
 -
TimeRangeInputTypeDefault
endDisabled
boolean
|
undefined
 -
endPlaceholder
string
|
undefined
 -
endSuffixElement
ReactNode -
endValue
Date
|
null
|
undefined
 -
format
string
|
undefined
 -
locale
string
|
Locale
|
undefined
 -
maxTime
Date
|
undefined
 -
minTime
Date
|
undefined
 -
onEndChange
((time: Date
|
null) => void)
|
undefined
 -
onEndFocus
(() => void)
|
undefined
 -
onEnterKeyDown
(() => void)
|
undefined
 -
onStartChange
((time: Date
|
null) => void)
|
undefined
 -
onStartFocus
(() => void)
|
undefined
 -
startDisabled
boolean
|
undefined
 -
startPlaceholder
string
|
undefined
 -
startSuffixElement
ReactNode -
startValue
Date
|
null
|
undefined
 -
size
undefined
|
"default"
|
"large"
 -
selected
boolean
|
undefined
 -
className
string
|
undefined
 -
focusSelection
undefined
|
"none"
|
"all"
|
"end"
 -
onIsEditingChange
((isEditing: boolean) => void)
|
undefined
 -
variant
undefined
|
"default"
|
"light"
|
"dark"
|
"reset"
 -
QuarterCalendarTypeDefault
currentYear
number
|
undefined
 -
defaultValue
Quarter
|
undefined
 -
disabled
boolean
|
undefined
 -
disabledQuarters
{ quarter: number; year: number; }[]
|
undefined
 -
locale
string
|
Locale
|
undefined
 -
maxYear
number
|
undefined
 -
minYear
number
|
undefined
 -
onChange
((quarter: Quarter
|
null) => void)
|
undefined
 -
readOnly
boolean
|
undefined
 -
startYear
number
|
undefined
 -
value
Quarter
|
null
|
undefined
 -
onNavigate
((direction: "prev"
|
"next", newYear: number) => void)
|
undefined
 -
className
string
|
undefined
 -
variant
undefined
|
"default"
|
"dark"
 -
YearCalendarTypeDefault
currentYear
Date
|
undefined
 -
defaultValue
Date
|
undefined
 -
disabled
boolean
|
undefined
 -
disabledYears
Date[]
|
undefined
 -
locale
string
|
Locale
|
undefined
 -
maxYear
Date
|
undefined
 -
minYear
Date
|
undefined
 -
onChange
((year: Date
|
null) => void)
|
undefined
 -
readOnly
boolean
|
undefined
 -
startYear
Date
|
undefined
 -
value
Date
|
null
|
undefined
 -
yearCount
number
|
undefined
 -
onNavigate
((direction: "prev"
|
"next", newStartYear: Date) => void)
|
undefined
 -
className
string
|
undefined
 -
variant
undefined
|
"default"
|
"dark"
 -
inferSelectionModeTypeDefault
end
Date -
start
Date -
inferMonthFromValueTypeDefault
end
Date -
start
Date -
formatQuarterTypeDefault
label
string -
months
string[] -
quarter
1
|
2
|
3
|
4
 -
year
number -
getQuarterDateRangeTypeDefault
label
string -
months
string[] -
quarter
1
|
2
|
3
|
4
 -
year
number -
timeToDateTypeDefault
hour
number -
minute
number -
useDateInputTypeDefault
onPressEnd
(((event: PressEvent) => void) & ((e: PointerEvent) => void))
|
undefined
 -
onPressStart
(((event: PressEvent) => void) & ((e: PointerEvent) => void))
|
undefined
 -
readOnly
boolean
|
undefined
 -
ref
Ref<HTMLInputElement>
|
undefined
 -
defaultValue
Date
|
null
|
undefined
 -
disabled
boolean
|
undefined
 -
format
string
|
undefined
 -
locale
string
|
Locale
|
undefined
 -
maxDate
Date
|
undefined
 -
minDate
Date
|
undefined
 -
onChange
((date: Date
|
null) => void)
|
undefined
 -
value
Date
|
null
|
undefined
 -
metaStep
number
|
undefined
 -
shiftStep
number
|
undefined
 -
step
number
|
undefined
 -
enableCache
boolean
|
undefined
 -
enableKeyboardNavigation
boolean
|
undefined
 -
enablePrediction
boolean
|
undefined
 -
enableProfiling
boolean
|
undefined
 -
onEnterKeyDown
(() => void)
|
undefined
 -
useTimeInputTypeDefault
onPressEnd
(((event: PressEvent) => void) & ((e: PointerEvent) => void))
|
undefined
 -
onPressStart
(((event: PressEvent) => void) & ((e: PointerEvent) => void))
|
undefined
 -
readOnly
boolean
|
undefined
 -
ref
Ref<HTMLInputElement>
|
undefined
 -
defaultValue
Date
|
null
|
undefined
 -
disabled
boolean
|
undefined
 -
format
string
|
undefined
 -
locale
string
|
Locale
|
undefined
 -
maxTime
Date
|
undefined
 -
minTime
Date
|
undefined
 -
onChange
((time: Date
|
null) => void)
|
undefined
 -
value
Date
|
null
|
undefined
 -
metaStep
number
|
undefined
 -
shiftStep
number
|
undefined
 -
step
number
|
undefined
 -
enableCache
boolean
|
undefined
 -
enableKeyboardNavigation
boolean
|
undefined
 -
enableProfiling
boolean
|
undefined
 -
onEnterKeyDown
(() => void)
|
undefined
 -