Time Picker

Прокручиваемый по колонкам выбор времени с выбором часов, минут, секунд и поддержкой 12/24-часового формата.

<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

Задайте произвольный шаг для часов, минут или секунд.

<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	''	Значение времени (v-model)
placeholder	string	'Pick time'	Плейсхолдер
format	'HH:mm' | 'HH:mm:ss' | 'hh:mm A' | 'hh:mm:ss A'	'HH:mm'	Формат времени
disabled	boolean	false	Отключить
clearable	boolean	true	Кнопка очистки
editable	boolean	true	Разрешить ввод по маске
minTime	string	''	Минимальное время (например '09:00')
maxTime	string	''	Максимальное время (например '18:00')
hourStep	number	1	Шаг часов
minuteStep	number	1	Шаг минут
secondStep	number	1	Шаг секунд
triggerClass	string	''	Пользовательский класс триггера
triggerStyle	Record<string, string>	—	Пользовательские стили триггера

Events

Event	Type	Description
update:modelValue	(value: string) => void	Время изменено
change	(value: string) => void	Время изменено