Выбор времени v-time-picker

Компонент v-time-picker в Vuetify предназначен для выбора времени в формате часы:минуты и может быть использован как отдельный элемент интерфейса или в составе диалогового окна (v-dialog). Он полностью интегрируется с системой v-model, что позволяет привязывать выбранное время к переменной состояния приложения.

Простейший пример использования:

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

<script>
export default {
  data() {
    return {
      time: '12:00'
    }
  }
}
</script>

Здесь v-model="time" обеспечивает двустороннюю привязку значения. При изменении времени в компоненте переменная time автоматически обновляется.

Форматы отображения времени

Компонент поддерживает различные форматы времени:

12-часовой формат с AM/PM (format="ampm"), по умолчанию.
24-часовой формат (format="24hr").

Пример 24-часового формата:

<v-time-picker v-model="time" format="24hr"></v-time-picker>

Для корректного использования 12-часового формата можно дополнительно управлять отображением am-pm с помощью свойства use-seconds для добавления секунд к времени.

Ограничение диапазона времени

Для ограничения выбора времени применяются свойства min и max:

<v-time-picker
  v-model="time"
  :min="'08:00'"
  :max="'18:00'">
</v-time-picker>

min — минимально допустимое время.
max — максимально допустимое время.

Также возможно использовать функцию allowed-hours и allowed-minutes для более гибкого контроля доступных значений:

<v-time-picker
  v-model="time"
  :allowed-hours="allowedHours"
  :allowed-minutes="allowedMinutes">
</v-time-picker>

<script>
export default {
  data() {
    return { time: '12:00' }
  },
  methods: {
    allowedHours(hour) {
      return hour >= 9 && hour <= 17
    },
    allowedMinutes(minute) {
      return minute % 15 === 0
    }
  }
}
</script>

В этом примере можно выбирать только часы с 9 до 17 и минуты кратные 15.

Интеграция с диалогом

Компонент часто используется вместе с v-dialog для отображения всплывающего выбора времени:

<v-dialog v-model="dialog" persistent width="290">
  <template #activator="{ props }">
    <v-btn v-bind="props">Выбрать время</v-btn>
  </template>
  <v-card>
    <v-time-picker v-model="time" full-width></v-time-picker>
    <v-card-actions>
      <v-btn text @click="dialog = false">Отмена</v-btn>
      <v-btn text @click="saveTime">OK</v-btn>
    </v-card-actions>
  </v-card>
</v-dialog>

Метод saveTime может фиксировать выбранное значение:

methods: {
  saveTime() {
    this.dialog = false
    console.log('Выбранное время:', this.time)
  }
}

Настройка внешнего вида

full-width — растягивает компонент на всю ширину контейнера.
color — задает цвет выделения выбранного времени.
header-color — цвет шапки компонента.
landscape — горизонтальное расположение для экранов с большим пространством.
readonly — делает компонент только для чтения, без возможности выбора.

Пример горизонтальной ориентации с кастомным цветом:

<v-time-picker
  v-model="time"
  landscape
  color="deep-purple accent-4"
  header-color="deep-purple lighten-4">
</v-time-picker>

Работа с секундами

По умолчанию v-time-picker работает только с часами и минутами. Для выбора секунд используется свойство use-seconds:

<v-time-picker v-model="time" use-seconds format="24hr"></v-time-picker>

В этом случае значение v-model будет содержать строку формата HH:mm:ss.

Локализация и международные стандарты

Компонент автоматически адаптируется под локаль приложения, наследуя настройки Vuetify i18n. Формат отображения AM/PM зависит от выбранной локали. Для полной локализации можно использовать плагин vue-i18n и передавать форматированные строки в v-time-picker.

Пользовательские события

v-time-picker поддерживает следующие события:

@change — вызывается при изменении времени.
@update:model-value — двусторонняя привязка для синхронизации значения.
@click:hour и @click:minute — реагируют на выбор отдельного часа или минуты.

Пример использования события @change:

<v-time-picker v-model="time" @change="onTimeChange"></v-time-picker>

methods: {
  onTimeChange(value) {
    console.log('Время изменилось на', value)
  }
}