DatePicker

DatePicker — это компонент для выбора даты и времени, предоставляемый библиотекой Naive UI. Он поддерживает одиночный выбор даты, выбор диапазона, а также настройку формата отображения и локализации.

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

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

В этом примере v-model:value связывает выбранное значение даты с реактивным состоянием date. Если пользователь выбирает дату, переменная автоматически обновляется.

Типы DatePicker

Naive UI предоставляет несколько вариантов компонента DatePicker:

  1. date – стандартный выбор одной даты.
  2. datetime – выбор даты и времени.
  3. daterange – выбор диапазона дат.
  4. datetimerange – выбор диапазона с временем.

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

<n-date-picker 
  type="daterange" 
  v-model:value="range" 
  :placeholder="['Начало', 'Конец']"
/>

Здесь placeholder позволяет задать отдельные подсказки для начала и конца диапазона.

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

Для отображения даты в нужном формате используется свойство format. По умолчанию используется формат YYYY-MM-DD.

<n-date-picker 
  v-model:value="date"
  format="DD/MM/YYYY"
/>

Для поддержки локализации используется свойство locale, которое принимает объект локализации. Naive UI поддерживает локали через импорт из naive-ui/es/locales.

import ruRU from 'naive-ui/es/locales/ru-RU'

<n-date-picker 
  v-model:value="date"
  :locale="ruRU"
/>

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

С помощью свойств disabled-date и disabled-time можно ограничить выбор определённых дат или времён.

<n-date-picker 
  v-model:value="date"
  :disabled-date="date => date < new Date()"
/>

В этом примере нельзя выбрать дату раньше текущей.

Для ограничения времени:

<n-date-picker 
  type="datetime"
  v-model:value="dateTime"
  :disabled-time="time => time.getHours() < 9 || time.getHours() > 18"
/>

Настройка пользовательского рендеринга

Свойство render-label позволяет изменить отображение выбранной даты. Это функция, которая получает объект даты и возвращает строку:

<n-date-picker
  v-model:value="date"
  :render-label="date => date ? `Выбрано: ${date.toLocaleDateString()}` : 'Выберите дату'"
/>

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

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

  • on-update:value – вызывается при изменении значения.
  • on-open / on-close – открытие и закрытие календаря.
  • on-confirm – подтверждение выбора (для диапазонов или datetime).

Пример:

<n-date-picker 
  v-model:value="date"
  @on-update:value="handleChange"
  @on-open="handleOpen"
  @on-close="handleClose"
/>
methods: {
  handleChange(value) {
    console.log('Выбрана дата:', value)
  },
  handleOpen() {
    console.log('Календарь открыт')
  },
  handleClose() {
    console.log('Календарь закрыт')
  }
}

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

DatePicker поддерживает разные размеры через свойство size:

  • small
  • medium (по умолчанию)
  • large
<n-date-picker v-model:value="date" size="large" />

Также можно кастомизировать иконки и кнопки с помощью слотов prefix, suffix и trigger.

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

Если нужно выбрать дату с временем, используется type="datetime":

<n-date-picker 
  type="datetime" 
  v-model:value="dateTime" 
  format="YYYY-MM-DD HH:mm"
/>

Можно ограничить интервалы минут или часов через time-picker-props:

<n-date-picker
  type="datetime"
  v-model:value="dateTime"
  :time-picker-props="{ stepHour: 1, stepMinute: 15 }"
/>

Кастомизация диапазона

Для диапазона дат можно:

  • Задавать отдельные форматы для начала и конца.
  • Ограничивать минимальный и максимальный промежуток между датами через shortcuts или проверку disabled-date.
<n-date-picker
  type="daterange"
  v-model:value="range"
  :disabled-date="date => date < new Date()"
/>

Заключение по функциональности

Компонент DatePicker в Naive UI сочетает:

  • Простую интеграцию с Vue через v-model
  • Поддержку одиночного и диапазонного выбора
  • Форматирование и локализацию
  • Ограничение выбора и кастомизацию интерфейса
  • События для полной управляемости

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

Оглавление