Date Picker

The date family: DatePicker (date/date-range, optional time, presets), TimePicker & TimeRangePicker (segmented clock fields), and Month/Year pickers. Popover-triggered pickers built on Calendar and reka-ui. For inline picking without a trigger, use Calendar directly.

Basic

A single date picker bound to a ref. The model is a plain Date.

With text input

Compose an Input with a Calendar popover for typed entry. Typing a parseable date ("June 15, 2026" or "2026-06-15") syncs the calendar, and picking a day writes the formatted string back. The shared DatePicker is trigger-only, so this is built from primitives.

Natural Language Picker

Parse plain-English dates ("tomorrow", "next friday", "in 3 days", "2 weeks ago") with a small dayjs helper, then mirror the result on a Calendar. The helper lives beside the example, so the shared DatePicker stays dependency-free.

Default

Click to open the calendar popover. The model is a plain Date.

Range

Set mode to range. The model becomes { start, end } of plain Dates, and the popover closes once both ends are picked.

Presets

presets renders a shortcut panel below the calendar: outline buttons that wrap to the calendar's width, at every breakpoint. A preset sets the value, jumps the calendar to it, and closes the popover. Pass a getter as value so relative presets like Today never go stale.

With time

Set withTime to add hour and minute selects below the calendar. Single mode only — picking a day keeps the popover open so the clock can be set, then Apply commits it.

Sizes

size controls the trigger height. The trigger is a field, so each step matches the equivalent Input and is one step taller on phones; the exact pixels belong to the active style.

Months and bounds

numberOfMonths defaults to 2 in range mode and is clamped to 1 below the md breakpoint, where extra months would otherwise stack. min and max bound the selectable window.

Date of birth

A birthday picker: max caps selection at today, minYear/maxYear frame the year dropdown, and the month-and-year layout lets you jump decades without paging the calendar.

Disabled

Set disabled to block the trigger from opening.

Time picker

TimePicker is a segmented HH:MM field (reka-ui TimeField). Bind to a Time from @internationalized/date.

Time — hour cycle

Set hourCycle to 12 or 24.

Time — granularity

Control the smallest segment: hour, minute (default), or second.

Time — step

Pass a step object (e.g. { minute: 15 }) to snap segment increments.

Time — clearable

Set clearable to show a clear button once a value is selected.

Time — disabled & read-only

disabled blocks all input; readonly shows the value but prevents edits.

Time range picker

TimeRangePicker has start and end segments with a dash separator. Bind to { start, end } Time values.

Month picker

MonthPicker opens a popover with a month grid. v-model is a reka-ui DateValue.

Month range picker

MonthRangePicker selects a start and end month. v-model is a reka-ui DateRange.

Year picker

YearPicker opens a popover with a decade-aligned year grid. v-model is a reka-ui DateValue.

Year range picker

YearRangePicker selects a start and end year. v-model is a reka-ui DateRange.

API Reference

DatePicker

Prop	Type	Default	Description
`mode`	`"single" \| "range"`	`"single"`	Pick one date or a start/end range.
`open`	`boolean`	`false`	Popover state. Supports v-model:open for programmatic control.
`align`	`"start" \| "center" \| "end"`	`"start"`	Popover alignment against the trigger. Forced to start below the md breakpoint.
`class`	`string`	—	Applied to the trigger button — the popover root renders no element of its own.
`modelValue`	`Date \| { start: Date \| null, end: Date \| null } \| null`	`null`	Selected value — a Date in single mode, a { start, end } object in range mode. Supports v-model.
`presets`	`{ label: string, value: Date \| { start, end } \| (() => …) }[]`	`[]`	Shortcut buttons beside the calendar. A function value is resolved on click.
`withTime`	`boolean`	`false`	Add hour/minute selects below the calendar. Single mode only.
`size`	`"sm" \| "default" \| "lg"`	`"default"`	Trigger height.
`numberOfMonths`	`number`	`range: 2, single: 1`	Months shown side by side. Always 1 below the md breakpoint.
`layout`	`"month-and-year" \| "month-only" \| "year-only" \| null`	`"month-and-year"`	Calendar heading layout.
`disabled`	`boolean`	`false`	Disable the trigger.
`placeholder`	`string`	`"Pick a date" / "Pick a date range"`	Trigger text when nothing is selected.
`defaultHour`	`number`	`9`	Initial hour when withTime is on.
`defaultMinute`	`number`	`0`	Initial minute when withTime is on.
`disableFutureDates`	`boolean`	`false`	Block selecting dates after today.
`disablePastDates`	`boolean`	`false`	Block selecting dates before today.
`min`	`Date \| null`	`null`	Earliest selectable date.
`max`	`Date \| null`	`null`	Latest selectable date.
`allowedDates`	`Date[] \| null`	`null`	Whitelist. Every other date is struck through and cannot be picked — for pickers locked to a fixed set of days.
`minYear`	`number`	—	Lower bound of the year dropdown.
`maxYear`	`number`	—	Upper bound of the year dropdown.
`placeholderDate`	`Date \| null`	`null`	Month the calendar opens on when empty.

Event	Description
`update:modelValue`	Fires with the chosen Date (single) or { start, end } (range). Enables v-model.
`update:open`	Fires when the popover opens or closes. Enables v-model:open.

Slot	Description
`presets`	Replaces the default preset panel. Receives { apply } to commit a value.

TimePicker

Prop	Type	Default	Description
`modelValue`	`Time \| undefined`	—	Time value from @internationalized/date. Use new Time(hour, minute). Supports v-model.
`hourCycle`	`12 \| 24`	`24`	Display 12- or 24-hour format.
`granularity`	`"hour" \| "minute" \| "second"`	`"minute"`	Smallest segment shown.
`step`	`{ hour?: number, minute?: number, second?: number }`	—	Increment applied per segment when stepping with arrows.
`clearable`	`boolean`	`false`	Show a clear button when a value is set.
`disabled`	`boolean`	`false`	Disable input.
`readonly`	`boolean`	`false`	Make the field read-only.

Event	Description
`update:modelValue`	Fires with the new Time (or undefined). Enables v-model.

TimeRangePicker

Prop	Type	Default	Description
`modelValue`	`{ start?: Time, end?: Time }`	—	Range with Time instances from @internationalized/date. Supports v-model.
`hourCycle`	`12 \| 24`	`24`	Display 12- or 24-hour format.
`clearable`	`boolean`	`false`	Show a clear button when a value is set.

Event	Description
`update:modelValue`	Fires with the new { start, end } range. Enables v-model.

MonthPicker / YearPicker

Prop	Type	Default	Description
`modelValue`	`DateValue \| null`	`null`	reka-ui DateValue for the picked month/year. Supports v-model.
`open`	`boolean`	`false`	Popover open state. Supports v-model:open.
`minValue / maxValue`	`DateValue`	—	Selectable bounds.
`isMonthDisabled / isYearDisabled`	`(date: DateValue) => boolean`	—	Disable individual cells.
`yearsPerPage`	`number`	`12`	YearPicker only. Years shown per page (decade-aligned).
`size`	`"sm" \| "default" \| "lg"`	`"default"`	Trigger height.
`align`	`"start" \| "center" \| "end"`	`"start"`	Popover alignment.
`placeholderText`	`string`	`"Pick a month" / "Pick a year"`	Trigger text when empty.

Event	Description
`update:modelValue`	Fires with the picked DateValue. Enables v-model.

MonthRangePicker / YearRangePicker

Prop	Type	Default	Description
`modelValue`	`DateRange \| null`	`null`	reka-ui { start, end } of DateValue. Supports v-model.
`maximumMonths / maximumYears`	`number`	—	Cap the selectable range length.
`fixedDate`	`"start" \| "end"`	—	Keep one endpoint fixed while adjusting the other.
`allowNonContiguousRanges`	`boolean`	`false`	Permit ranges that skip unavailable cells.
`minValue / maxValue`	`DateValue`	—	Selectable bounds.
`size`	`"sm" \| "default" \| "lg"`	`"default"`	Trigger height.

Event	Description
`update:modelValue`	Fires with the { start, end } DateRange. Enables v-model.

Accessibility

Keyboard shortcuts and ARIA behavior.

Shortcut	Description
`Space`	Opens the calendar popover from the trigger.
`Enter`	Opens the calendar popover from the trigger.
`↑`	Moves to the same day in the previous week.
`↓`	Moves to the same day in the next week.
`←`	Moves to the previous day.
`→`	Moves to the next day.
`Esc`	Closes the popover and returns focus to the trigger.

Composes a button, popover, and calendar grid.
Focus moves into the grid when the popover opens and back to the trigger when it closes.
The trigger exposes aria-expanded to reflect the popover state.

Data Table Dialog