Выбор времени

Селектор времени. Часы / минуты / секунды выбираются колонкой-колесом; если format не содержит ss, колонка секунд автоматически скрывается; arrowControl переключает управление на стрелки в заголовках колонок. Панель монтируется в body (в Vue2 нет Teleport).

Выбор времени

<template>
  <div class="demo-col" style="gap: 16px">
    <div class="demo-row" style="gap: 12px; flex-wrap: wrap">
      <LhTimePicker v-model="t1" format="HH:mm:ss" placeholder="Выберите время" clearable />
      <LhTimePicker v-model="t2" format="HH:mm" placeholder="Часы-минуты (без секунд)" size="small" />
      <LhTimePicker v-model="t3" format="HH:mm:ss" arrow-control placeholder="Управление стрелками" size="large" />
      <LhTimePicker v-model="t1" format="HH:mm:ss" disabled placeholder="Отключено" />
      <LhTimePicker v-model="t1" format="HH:mm:ss" readonly placeholder="Только для чтения" />
    </div>
    <LhTimePicker
      v-model="t4"
      format="HH:mm:ss"
      :step-hour="2"
      :step-minute="15"
      :step-second="30"
      placeholder="Шаг: час 2 / мин 15 / сек 30"
    />
    <p class="demo-note">Часы-минуты-секунды: {{ fmt(t1) }} | Часы-минуты: {{ fmt(t2) }} | Стрелки: {{ fmt(t3) }} | Шаг: {{ fmt(t4) }}</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    t1: new Date(2026, 9, 3, 14, 30, 0),
    t2: null,
    t3: null,
    t4: null,
  }),
  methods: {
    fmt(v) {
      if (!(v instanceof Date)) return '(не выбрано)'
      const p = (n) => String(n).padStart(2, '0')
      return p(v.getHours()) + ':' + p(v.getMinutes()) + ':' + p(v.getSeconds())
    },
  },
}
</script>

Props

Проп	Описание	Тип	По умолчанию
v-model	Текущий выбор	Date \| null	—
mode	Режим (зарезервирован для связи с датой; сейчас рендерится колонками времени)	LhTimePickerMode	—
size	Размер	'small' \| 'medium' \| 'large'	'medium'
disabled / clearable / readonly	Отключено / очищаемое / только для чтения	boolean	false
placeholder	Плейсхолдер	string	Языковой пакет
format	Формат отображения (HH:mm:ss, HH:mm); без ss колонка секунд скрывается	string	'HH:mm:ss'
arrowControl	Управление стрелками (кнопки вверх / вниз в заголовке колонки)	boolean	false
stepHour / stepMinute / stepSecond	Шаг часов / минут / секунд	number	1
teleportTarget	Целевой элемент монтирования всплывающего слоя	string \| HTMLElement	'body'
sx	Компактная раскладка через sx	—	—

Events

input (v-model), change (value)

Доступность

Каждая колонка — role="spinbutton" + aria-valuenow/min/max; оба варианта взаимодействия (колесо и стрелки) поддерживают клавиши со стрелками; триггер — role="combobox" + aria-expanded, кнопка подтверждения на панели достижима фокусом.