DateTimePicker

DateTimePicker в Naive UI представляет собой комбинированный элемент выбора даты и времени, который объединяет функциональность календаря и таймпикера в одном компоненте. Он позволяет пользователю легко выбирать дату, время или одновременно обе величины, обеспечивая гибкую настройку форматов, шагов времени и ограничений выбора.

import { createApp } from 'vue'
import { NDateTimePicker } from 'naive-ui'

const app = createApp({
  data() {
    return {
      value: null
    }
  },
  template: `<n-date-time-picker v-model:value="value" />`
})

app.mount('#app')

Ключевое свойство — v-model:value, которое связывает выбранное значение с реактивной переменной. Значение хранится в виде объекта Date.

Форматы отображения и парсинга

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

  • format — строка формата для отображения значения в поле ввода. Пример: "YYYY-MM-DD HH:mm:ss".
  • valueFormat — формат для хранения значения, когда требуется строковое представление вместо объекта Date.
<n-date-time-picker
  v-model:value="value"
  format="DD.MM.YYYY HH:mm"
  value-format="YYYY-MM-DD HH:mm:ss"
/>

Особенность: если valueFormat не задан, компонент работает с объектами Date, что удобно для вычислений и передачи в API.

Ограничение выбора даты и времени

Для ограничения доступных дат используется disabled-date, принимающий функцию с аргументом текущей проверяемой даты:

<n-date-time-picker
  v-model:value="value"
  :disabled-date="date => date.getDay() === 0 || date.getDay() === 6" 
/>

В примере недоступны все выходные. Для ограничения времени применяется disabled-time, которая возвращает объект с массивами hours, minutes и seconds:

<n-date-time-picker
  v-model:value="value"
  :disabled-time="() => ({
    hours: [0,1,2,3,4,5,6,7,23],
    minutes: [],
    seconds: []
  })"
/>

Настройка шага выбора времени

Свойства hour-step, minute-step, second-step позволяют задавать шаг при выборе времени, упрощая выбор периодов:

<n-date-time-picker
  v-model:value="value"
  :hour-step="2"
  :minute-step="15"
/>

Здесь пользователь сможет выбирать часы с шагом 2 и минуты с шагом 15.

Режимы выбора

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

  • date — выбор только даты.
  • time — выбор только времени.
  • datetime — комбинированный выбор даты и времени.
  • month — выбор месяца.
  • year — выбор года.
<n-date-time-picker
  v-model:value="value"
  type="time"
/>

Режим задается через свойство type и влияет на визуальное отображение панели выбора.

Управление отображением панели

С помощью свойств show-header, show-seconds, clearable можно гибко настраивать панель:

  • show-header — отображение заголовка календаря с навигацией по месяцам и годам.
  • show-seconds — отображение секунд при выборе времени.
  • clearable — добавляет кнопку для очистки выбранного значения.
<n-date-time-picker
  v-model:value="value"
  :show-header="true"
  :show-seconds="false"
  :clearable="true"
/>

Поддержка локализации

Naive UI использует стандартные объекты локализации для компонента. Локаль подключается через NLocaleProvider:

import { NLocaleProvider, zhCN } from 'naive-ui'

<NLocaleProvider :locale="zhCN">
  <n-date-time-picker v-model:value="value" />
</NLocaleProvider>

Важно: локализация влияет на названия месяцев, дней недели и формат даты по умолчанию.

Работа с диапазонами дат

Для выбора диапазона используется type="datetimerange", значение хранится массивом из двух дат [start, end].

<n-date-time-picker
  v-model:value="range"
  type="datetimerange"
  :format="'YYYY-MM-DD HH:mm'"
/>

Можно комбинировать с ограничениями и шагами времени для каждого конца диапазона через disabled-date и disabled-time.

События компонента

  • update:value — вызывается при изменении значения.
  • open / close — открытие или закрытие панели.
  • focus / blur — события фокуса на поле ввода.
  • confirm — используется в режиме с выбором диапазона или кастомным подтверждением.
<n-date-time-picker
  v-model:value="value"
  @update:value="handleUpdate"
  @confirm="handleConfirm"
/>

Стилизация и кастомизация

Компонент поддерживает кастомные темы через свойства size, status, placeholder и через CSS-переменные Naive UI:

  • size — 'small' | 'medium' | 'large'.
  • status — 'success' | 'warning' | 'error'.
  • placeholder — текст-заполнитель при пустом значении.
<n-date-time-picker
  v-model:value="value"
  size="large"
  status="warning"
  placeholder="Выберите дату и время"
/>

Для глубокой стилизации можно использовать CSS-переменные вида:

.n-date-time-picker {
  --n-bezier: cubic-bezier(0.4, 0, 0.2, 1);
  --n-font-size: 14px;
}

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

DateTimePicker полностью совместим с n-form, поддерживает валидацию через rules и реактивные модели:

<n-form :model="form" :rules="rules">
  <n-form-item label="Дата и время" path="datetime">
    <n-date-time-picker v-model:value="form.datetime" />
  </n-form-item>
</n-form>

Преимущество: легко строить сложные формы с датой и временем, соблюдая правила валидации и динамическую реактивность.

Эти возможности делают DateTimePicker мощным инструментом для любого интерфейса, где требуется точный и удобный выбор даты и времени с полной кастомизацией и поддержкой локализации.

Оглавление