TimePicker

Компонент TimePicker библиотеки Naive UI предоставляет возможность выбора времени с высокой гибкостью и поддержкой различных форматов. Он позволяет интегрировать удобный интерфейс для выбора часов, минут и секунд, а также поддерживает выбор интервалов времени. TimePicker реализован на основе реактивной системы Vue 3, что обеспечивает синхронизацию состояния и возможность управления через пропсы и события.

Базовое использование компонента выглядит следующим образом:

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

<script setup>
import { ref } from 'vue'
import { NTimePicker } from 'naive-ui'

const time = ref('12:00:00')
</script>

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

Форматирование и локализация

TimePicker поддерживает кастомные форматы времени через проп format. Основные шаблоны форматирования:

  • HH — часы в 24-часовом формате
  • hh — часы в 12-часовом формате
  • mm — минуты
  • ss — секунды
  • A или a — AM/PM

Пример использования 12-часового формата с AM/PM:

<n-time-picker v-model="time" format="hh:mm A" />

Для локализации интерфейса применяется объект locale, который можно передать через провайдер Naive UI или напрямую в компонент. Это позволяет изменить подписи кнопок, порядок отображения элементов и форматирование:

import { enUS } from 'naive-ui'

<n-time-picker v-model="time" :locale="enUS" />

Управление шагом времени

Параметр steps позволяет задать интервал изменения для часов, минут и секунд. Это полезно для ограничения выбора времени определёнными шагами:

<n-time-picker 
  v-model="time" 
  :steps="[1, 15, 30]" 
/>

В данном случае:

  • 1 — шаг для часов
  • 15 — шаг для минут
  • 30 — шаг для секунд

Компонент автоматически применяет шаги при прокрутке колёсика времени или при вводе вручную.

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

Для ограничения выбора используется проп disabled-hours, disabled-minutes и disabled-seconds. Эти свойства принимают функции, возвращающие массив запрещённых значений:

<n-time-picker
  v-model="time"
  :disabled-hours="() => [0, 1, 2]"
  :disabled-minutes="hour => hour === 12 ? [0,1,2] : []"
/>

Пример выше запрещает выбор часов с 0 до 2, а для 12 часов блокирует первые три минуты. Этот подход позволяет гибко управлять допустимым диапазоном времени.

Интерактивные события

TimePicker поддерживает несколько событий для отслеживания изменений:

  • onUpdate:value — вызывается при изменении значения времени
  • onConfirm — срабатывает при подтверждении выбранного времени
  • onFocus и onBlur — управление состоянием фокуса

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

<n-time-picker
  v-model="time"
  @onUpdate:value="handleUpdate"
  @onConf irm="handleConfirm"
/>

<script setup>
function handleUpdate(newTime) {
  console.log('Время изменено:', newTime)
}

function handleConfirm(confirmedTime) {
  console.log('Выбранное время подтверждено:', confirmedTime)
}
</script>

TimePicker с диапазоном времени

Для выбора интервала времени используется компонент TimePicker в режиме диапазона. Это реализуется через проп range и массив с двумя значениями:

<n-time-picker
  v-model="timeRange"
  range
  format="HH:mm"
/>

<script setup>
const timeRange = ref(['09:00', '18:00'])
</script>

Поддерживаются все стандартные функции: шаг, формат, локализация и события.

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

TimePicker поддерживает кастомизацию через пропы size, placeholder и disabled:

  • size — размеры: small, medium, large
  • placeholder — текст-заполнитель
  • disabled — блокировка выбора

Пример:

<n-time-picker
  v-model="time"
  size="large"
  placeholder="Выберите время"
  :disabled="false"
/>

Кроме того, для полного контроля визуального представления можно использовать слот suffix для добавления иконок или дополнительных элементов управления.

Поддержка ввода вручную

Компонент позволяет вводить время вручную через текстовое поле. Для этого применяется проп allow-input. Можно комбинировать с валидацией формата:

<n-time-picker
  v-model="time"
  allow-input
  format="HH:mm"
/>

При вводе некорректного времени компонент автоматически сбрасывает значение или сохраняет последнее корректное.

Комбинированное использование

Часто TimePicker используется совместно с DatePicker или формами для полной обработки даты и времени. При этом двусторонняя привязка v-model позволяет интегрировать компонент в реактивные объекты и управлять состоянием всей формы централизованно.

Резюме ключевых возможностей

  • Двустронняя привязка через v-model
  • Настройка формата отображения времени
  • Поддержка локализации и AM/PM форматов
  • Управление шагами выбора через steps
  • Ограничение диапазона времени с помощью disabled-hours/minutes/seconds
  • События onUpdate:value, onConfirm, onFocus, onBlur
  • Режим выбора диапазона времени (range)
  • Кастомизация внешнего вида (size, placeholder, слоты)
  • Поддержка ручного ввода с allow-input

Эта гибкость делает TimePicker мощным инструментом для создания форм с временными данными в интерфейсах на Vue 3 с использованием Naive UI.

Оглавление