Props

PropTypeDefaultDescription
valueDate | nullSelected date-time value
onChange(dateTime: Date | null) => voidCallback when value changes
timeTimeConfigTime panel configuration
minDateDateMinimum selectable date
maxDateDateMaximum selectable date
localePartial<Locale>Custom locale configuration
initialMonthDateInitial displayed month
todayDatenew Date()Override today’s date for isToday highlighting and disablePast/disableFuture calculations
onMonthChange(month: Date) => voidCallback fired when the displayed month changes
size"small" | "medium" | "large" | "x-large""medium"Component size
weekStartsOnWeekDay"sunday"First day of the week
isDateUnavailable(date: Date) => booleanMark dates as disabled
displayFormatstringCustom display format
openbooleanControlled open state
initialOpenbooleanInitial open state (uncontrolled)
onOpenChange(open: boolean) => voidCallback when open state changes
requiredbooleanfalseDisable clearing the value
showOutsideDaysbooleanfalseShow days from adjacent months
highlightDatesDate[]Dates to highlight
shouldCloseOnSelectbooleanfalseAuto-confirm on preset click
numberOfMonthsnumber1Number of months to display
captionLayout"buttons" | "dropdown""buttons"Caption navigation style
fromYearnumberStart year for dropdown
toYearnumberEnd year for dropdown
disablePastbooleanfalseDisable dates before today
disableFuturebooleanfalseDisable dates after today
inlinebooleanfalseShow calendar inline (no popup)
namestringHidden input name for form submission
placeholderstringTrigger placeholder text
hideHeaderbooleanfalseHide the navigation header
hideFooterbooleanfalseHide the action footer

TimeConfig

interface TimeConfig {
/** Time display precision. Defaults to "minute". */
precision?: "hour" | "minute" | "second";
/** 12-hour or 24-hour format. Defaults to "24". */
hourFormat?: "12" | "24";
/** Minute increment step. Defaults to 5. */
minuteStep?: 1 | 2 | 3 | 5 | 10 | 15 | 20 | 30;
/** Second increment step. Defaults to 1. */
secondStep?: 1 | 2 | 3 | 5 | 10 | 15 | 20 | 30;
/** Height (in px) of each scroll wheel item. Defaults to 32. */
itemHeight?: number;
}