TimePicker

Form

Time picker with 12h or 24h format, optional seconds.

Props

Prop	Type	Default	Description
`modelValue`	`string`	`undefined`	HH:MM or HH:MM:SS value (v-model).
`format`	`"12" \| "24"`	`"24"`	Display format.
`showSeconds`	`boolean`	`false`	Show the seconds input.
`disabled`	`boolean`	`false`	Disable the component.

Examples

Time selection

vue

<script setup>
const time = ref('09:30')
</script>
<template>
  <DsTimePicker v-model="time" format="24" />
  <!-- 12h format with seconds -->
  <DsTimePicker v-model="time" format="12" :show-seconds="true" />
</template>

Skeleton

Use DsTimePickerSkeleton as a loading placeholder while content is being fetched.

Default

vue

<DsTimePickerSkeleton />

Accessibility

Each hour/minute/second spinner is a native number input.
Escape or outside click closes the picker.

Textarea

Alert