DatePicker

Date field that opens a calendar popover. Supports a size prop: xs, sm, md (default), lg, xl.

Jump to API reference

Import

Vue
import { UiDatePicker } from '@ziyarago/ui/vue'

Filled

Vue
<UiDatePicker label="Check-in" v-model="value" />

Empty

Vue
<UiDatePicker label="Check-out" placeholder="Select date" v-model="value" />

Error

Vue
<UiDatePicker
  label="Departure"
  error="Date must be in the future"
  v-model="value"
 />

Sizes

Vue
<UiDatePicker size="xs" label="Check-in" v-model="value" />

<UiDatePicker size="sm" label="Check-in" v-model="value" />

<UiDatePicker size="md" label="Check-in" v-model="value" />

<UiDatePicker size="lg" label="Check-in" v-model="value" />

<UiDatePicker size="xl" label="Check-in" v-model="value" />

API reference

Field with a calendar popup for choosing a date. Use in forms where a single date is needed.

Props

PropType and valuesDefaultDescription
modelValuev-modelstring | Date | number—Selected date (ISO string recommended, e.g. 2026-10-21).
localestring'en-GB'BCP 47 locale used for the trigger text and the calendar.
weekStartsOnnumber1First day of the week: 0 = Sunday, 1 = Monday.
clearablebooleanfalseShows a clear (x) button while a date is set; it calls change with null.
minDate | string | number—Earliest selectable day, forwarded to the calendar.
maxDate | string | number—Latest selectable day, forwarded to the calendar.
disabledDate(date: Date) => boolean—Return true to disable a specific day, forwarded to the calendar.
requiredbooleanfalseAdds a red asterisk to the label. Does not validate.
labelstring—Label shown above the control.
hintstring—Helper text under the control. Hidden while error is set.
errorstring—Error message under the control. Turns the control red and is announced with role="alert".
placeholderstring—Shown when no date is set. Defaults to "Select date".
disabledbooleanfalseDisables the control.
sizexssmmdlgxl'md'Control height, font and padding scale.

Events

Vue: @name. React: onName.

changeCalled with a Date object (local midnight) for the chosen day. The popup closes after picking.

Notes

  • The event payload is a Date, not a string: convert to ISO yourself if the model is a string.
  • The popup closes on outside click and on Escape.