TimeInput

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

Storybook @choice-ui/calendar View 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

States

Normal

Disabled

Readonly

No prefix icon

Custom prefix

Read Only

ReadOnly: Demonstrates the TimeInput component in readOnly mode.

- Prevents value changes while allowing focus and selection - Maintains normal visual appearance (unlike disabled) - Useful for displaying non-editable time information

Current Value:

2:30:00 PM

Change Count:

💡 Try changing the readonly time input - the value should not change and the change count should remain at 0. Only the normal input will change the value.

Size

Variable

Drag Interaction

🖱️ Drag Interaction

• Click and drag the clock icon to adjust time

• Hold Shift key to drag 15 minutes

• Hold Ctrl/Cmd key to drag 1 hour

Formats

24-hour format (HH:mm)

12-hour format (h:mm a)

With seconds (HH:mm:ss)

Smart Completion

💡 Smart Completion

• 9 → 09:00

• 930 → 09:30

• 1430 → 14:30

• 2pm → 14:00

• 9am → 09:00

• 下午2点 → 14:00

Time Range

Work time (09:00 - 18:00)

Afternoon time (12:00 - 23:59)

Custom Steps

5-minute step

↑/↓ key adjust 5 minutes, Shift+↑/↓ adjust 30 minutes

15-minute step

↑/↓ key adjust 15 minutes, Shift+↑/↓ adjust 60 minutes

Combined

Select Time

1 hour

API reference

MonthCalendar	Type	Default
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"	-
DateInputValue	Type	Default
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	-
DateRangeInput	Type	Default
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"	-
TimeCalendar	Type	Default
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"	-
TimeInputValue	Type	Default
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	-
TimeRangeInput	Type	Default
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"	-
QuarterCalendar	Type	Default
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"	-
YearCalendar	Type	Default
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"	-
inferSelectionMode	Type	Default
end	Date	-
start	Date	-
inferMonthFromValue	Type	Default
end	Date	-
start	Date	-
formatQuarter	Type	Default
label	string	-
months	string[]	-
quarter	1 \| 2 \| 3 \| 4	-
year	number	-
getQuarterDateRange	Type	Default
label	string	-
months	string[]	-
quarter	1 \| 2 \| 3 \| 4	-
year	number	-
timeToDate	Type	Default
hour	number	-
minute	number	-
useDateInput	Type	Default
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	-
useTimeInput	Type	Default
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	-