Forms
Calendar
A month grid for picking a date or date range — navigation, today/clear actions, and min/max bounds. Powers `DateInput`'s popover, but also usable standalone for an inline calendar.
<UiCalendar />Options
One block per prop — what it does, and what it looks like set.
Model value
modelValue is the selected date as a real Date — or a { start, end } object once range is set, and null for nothing chosen. Pass it to control the selection yourself; this is the same value DateInput keeps in its own modelValue, since it just forwards it here.
Default value
defaultValue is the month the calendar opens on while it still owns its own state, without controlling the selection yourself.
Range
range switches to picking a start and an end instead of a single day, which also changes modelValue to a { start, end } object. Hovering past a chosen start previews the range before the end is picked.
Select a start date
Min
min is the earliest selectable day — everything before it is disabled rather than hidden, so the reader can still see where the boundary falls. The example below is bounded to the current month.
Max
max is the other boundary — the latest selectable day, with everything after it disabled. Pairing it with min fences the calendar to a booking window or a reporting period.
Locale
locale is the BCP 47 tag used to format the month heading and the weekday row. Set it from the reader's locale rather than the content's.
Clearable
clearable shows a button to clear the selected value, next to the today shortcut.
Markers
markers flags days with a small dot under their number — appointments, deadlines, anything worth noticing before opening the day. Each marker takes an optional color; a day with more than three shows only the first three.
Examples
The component in real use: compositions that answer "how do I build X with this", rather than one prop at a time.
Powering `DateInput`
DateInput renders this exact component inside its popover, forwarding range, min, max, locale and clearable straight through and closing itself once a selection lands.
API Reference
Generated from the component's source — props, slots and emits as the component actually declares them.
Props
Date | CalendarRangeValue | nullCalendarMarker[]Emits
update:modelValue[value: ModelValue]select[value: ModelValue]Types
type ModelValue = Date | CalendarRangeValue | null;type MarkerColor = "neutral" | "primary" | "secondary" | "success" | "error" | "warning" | "info" | "pending";interface CalendarRangeValue {
start: Date | null;
end: Date | null;
}interface CalendarMarker {
/**
* The day this marker lands on — only its year/month/day are read, so the time of day is ignored.
*/
date: Date;
/**
* @defaultValue 'primary'
*/
color?: MarkerColor;
}interface CalendarCell {
date: Date;
outside: boolean;
}