Time Picker

Scrollable column time picker with hour, minute, second selection and 12/24 hour support.

<script setup>
import { ref } from 'vue'
const time = ref('')
</script>

<template>
  <VxTimePicker v-model="time" />
</template>

With Seconds

<template>
  <VxTimePicker v-model="time" format="HH:mm:ss" />
</template>

12-Hour Format

<template>
  <VxTimePicker v-model="time" format="hh:mm A" />
</template>

Step Intervals

Set custom step for hours, minutes, or seconds.

<template>
  <VxTimePicker :minute-step="15" />
  <!-- Shows: 00, 15, 30, 45 -->
</template>

Min / Max Time

<template>
  <VxTimePicker min-time="09:00" max-time="18:00" />
</template>

Non-editable

Click to pick

<template>
  <VxTimePicker :editable="false" />
</template>

Disabled

14:30

<template>
  <VxTimePicker v-model="time" disabled />
</template>

Props

Prop	Type	Default	Description
modelValue	string	''	Time value (v-model)
placeholder	string	'Pick time'	Placeholder
format	'HH:mm' | 'HH:mm:ss' | 'hh:mm A' | 'hh:mm:ss A'	'HH:mm'	Time format
disabled	boolean	false	Disable
clearable	boolean	true	Clear button
editable	boolean	true	Allow typing with mask
minTime	string	''	Min time (e.g. '09:00')
maxTime	string	''	Max time (e.g. '18:00')
hourStep	number	1	Hour step interval
minuteStep	number	1	Minute step interval
secondStep	number	1	Second step interval
triggerClass	string	''	Custom trigger class
triggerStyle	Record<string, string>	—	Custom trigger styles

Events

Event	Type	Description
update:modelValue	(value: string) => void	Time changed
change	(value: string) => void	Time changed