DatePicker

Calendar-driven date selection. Built on @internationalized/date for locale-aware formatting and timezone-correct comparisons. Two trigger styles: a single button (default) or segmented input fields (typed).

Basic

<DatePicker v-model="value" />

The v-model is a DateValue object

DatePicker's v-model type is Ref<DateValue | undefined> (from @internationalized/date) — not Ref<null>. Initialize with ref<DateValue | undefined>(undefined).

With initial value

<DatePicker v-model="value" />

const value = ref(today(getLocalTimeZone()))

Typed (segmented input)

Use typed when the user benefits from typing each segment (day, month, year) directly — common in dense forms.

mm

/

dd

/

yyyy

<DatePicker v-model="value" typed />

With suggestions

Pass an array of preset values to surface as quick picks above the calendar.

<DatePicker v-model="value" :suggestions="suggestions" />

suggestions is { label: string; value: DateValue }[].

Validation states

<DatePicker v-model="value" error />
<DatePicker v-model="value" warning />
<DatePicker v-model="value" missing />

Disabled

<DatePicker v-model="value" disabled />

Custom placeholder

<DatePicker v-model="value" placeholder="Choose a deadline" />

Date constraints

min-value and max-value restrict the selectable range. Dates outside the range render disabled in the calendar.

<DatePicker
  v-model="date"
  :min-value="new CalendarDate(2024, 1, 1)"
  :max-value="new CalendarDate(2024, 12, 31)"
/>

import { CalendarDate } from '@internationalized/date'

API serialization

The v-model holds a DateValue object (@internationalized/date). When sending to an API, call .toString() to get the ISO date format:

api.post('/endpoint', {
    ...values,
    date: values.date?.toString(), // "2026-03-19"
})

With vee-validate + Zod, transform on submit:

import type { DateValue } from '@scaler-tech/aurora/date-picker'

const schema = z.object({
    date: z.custom<DateValue>().transform(v => v.toString()),
})

Props

Prop	Type	Default	Description
modelValue	DateValue | undefined	undefined	Selected date. Use with v-model.
placeholder	string	'Pick a date'	Trigger text shown when no date is selected.
typed	boolean	false	Render the trigger as a segmented input instead of a single button.
suggestions	{ label: string; value: DateValue }[]	—	Quick-pick presets shown above the calendar.
closeOnSelect	boolean	true	Close the popover after a date is picked.
minValue	DateValue	—	Earliest selectable date. Dates before this render disabled.
maxValue	DateValue	—	Latest selectable date. Dates after this render disabled.
disabled	boolean	false	Disable interactions.
readonly	boolean	false	Read-only display.
error	boolean	false	Apply error state styling.
success	boolean	false	Apply success state styling.
warning	boolean	false	Apply warning state styling.
missing	boolean	false	Apply missing-required-field state styling.

DatePicker extends reka-ui's DatePickerRoot props (omitting placeholder and modelValue which aurora overrides). Range, min/max, and isDateUnavailable are accepted but not surfaced in this table — see reka-ui DatePicker docs for the full underlying API.

Adapter contract

The trigger button uses DS_DATE_FORMATTER to format the selected date. Aurora's default formatter passes through @internationalized/date formatting; override DS_DATE_FORMATTER at the app root to apply locale-specific or custom rendering.