TimePicker

Hour and minute selects producing an HH:MM string. Supports a size prop: xs, sm, md (default), lg, xl.

Import

Vue

import { UiTimePicker } from '@ziyarago/ui/vue'

Default

Pickup time

Vue

<UiTimePicker label="Pickup time" v-model="value" />

Evening

Flight departure

Vue

<UiTimePicker label="Flight departure" v-model="value" />

Sizes

Pickup time

Vue

<UiTimePicker size="xs" label="Pickup time" v-model="value" />

<UiTimePicker size="sm" label="Pickup time" v-model="value" />

<UiTimePicker size="md" label="Pickup time" v-model="value" />

<UiTimePicker size="lg" label="Pickup time" v-model="value" />

<UiTimePicker size="xl" label="Pickup time" v-model="value" />

API reference

Hour and minute selects for a time of day. Use for opening hours and appointment times.

Props

PropType and valuesDefaultDescription

modelValuev-modelstring'09:00'Time as "HH:mm" (24 hour).

minuteStepnumber15Step of the minute options in minutes (1 to 60). 15 gives 00, 15, 30, 45; 5 gives 00, 05, ... 55.

labelstring—Label shown above the control.

disabledbooleanfalseDisables the control.

sizexssmmdlgxl'md'Control height, font and padding scale.

Events

Vue: @name. React: onName.

changeCalled with a new "HH:mm" string. Minute options follow minuteStep.

Notes

A model value outside the minute grid (e.g. 09:07) is added to the minute list so it still displays.
Both selects close on outside click and on Escape.