Диапазоны дат

В библиотеке Naive UI компонент DatePicker является основным инструментом для выбора как одиночной даты, так и диапазона дат. Для выбора диапазона используется свойство type="daterange", которое позволяет пользователю одновременно выбрать начальную и конечную даты.

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

import { createApp, ref } from 'vue';
import { NDatePicker } from 'naive-ui';

const app = createApp({
  setup() {
    const dateRange = ref([null, null]);
    return { dateRange };
  },
  template: `
    <n-date-picker
      v-model="dateRange"
      type="daterange"
      format="YYYY-MM-DD"
      placeholder="Выберите диапазон дат"
    />
  `
});

app.mount('#app');

Здесь v-model связывает выбранный диапазон с переменной dateRange. Значение всегда представлено в виде массива [startDate, endDate], где обе даты могут быть null, если пользователь ещё не сделал выбор.

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

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

format="DD.MM.YYYY"

Для локализации текста компонентов (placeholder, кнопки «Сейчас», «Очистить») используется объект локали:

import { enUS, ruRU } from 'naive-ui';

<n-date-picker
  v-model="dateRange"
  type="daterange"
  locale="ruRU"
/>

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

Свойства disabledDate и timePickerProps позволяют ограничить доступные пользователю даты и время.

  • disabledDate — функция, принимающая дату, возвращающая true, если дата недоступна:
<n-date-picker
  v-model="dateRange"
  type="daterange"
  :disabled-date="(date) => date < new Date()"
/>

В этом примере запрещён выбор прошлых дат.

  • timePickerProps позволяет настроить часы и минуты для диапазонов с временем:
<n-date-picker
  v-model="dateRange"
  type="datetimerange"
  :time-picker-props="{ format: 'HH:mm', step: 15 }"
/>

Здесь время выбирается с шагом 15 минут.

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

Иногда требуется ограничить максимальную длину выбранного диапазона. В Naive UI можно реализовать это через событие onUpdate:value:

const maxDays = 7;
const handleUpdate = (value) => {
  if (value[0] && value[1]) {
    const diff = (value[1] - value[0]) / (1000 * 60 * 60 * 24);
    if (diff > maxDays) {
      alert(`Диапазон не может превышать ${maxDays} дней`);
      value[1] = new Date(value[0].getTime() + maxDays * 24 * 60 * 60 * 1000);
    }
  }
};

<n-date-picker
  v-model="dateRange"
  type="daterange"
  @update:value="handleUpdate"
/>

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

DatePicker полностью совместим с компонентом Form из Naive UI. Диапазоны дат можно валидировать через правила валидации:

const rules = {
  period: [
    {
      required: true,
      validator: (rule, value) => {
        if (!value[0] || !value[1]) return new Error('Выберите диапазон дат');
        return true;
      }
    }
  ]
};

<n-form :model="form" :rules="rules">
  <n-form-item label="Период" path="period">
    <n-date-picker v-model="form.period" type="daterange" />
  </n-form-item>
</n-form>

Пользовательский стиль и темы

Стили диапазонов можно кастомизировать через CSS-переменные и свойства темы:

import { createTheme, NDatePicker } from 'naive-ui';

const theme = createTheme({
  'DatePicker-border-radius': '8px',
  'DatePicker-hover-color': '#f0f0f0'
});

<n-date-picker v-model="dateRange" type="daterange" :theme-overrides="theme" />

Также можно изменять цвет подсветки выбранного диапазона, фон календаря и стиль выделения через theme-overrides.

Поддержка предустановленных диапазонов

Для быстрого выбора часто используются предустановленные диапазоны, например «Сегодня», «Последние 7 дней». Это реализуется через слот footer и методы управления моделью:

<n-date-picker
  v-model="dateRange"
  type="daterange"
>
  <template #footer>
    <n-button @click="dateRange = [new Date(), new Date()]">Сегодня</n-button>
    <n-button @click="dateRange = [new Date(Date.now() - 6*24*60*60*1000), new Date()]">
      Последние 7 дней
    </n-button>
  </template>
</n-date-picker>

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

Компонент DatePicker генерирует события:

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

Реактивное связывание через v-model позволяет моментально использовать выбранный диапазон в других вычислениях или API-запросах.

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

Для выбора диапазонов с временем (type="datetimerange") возможна настройка отдельных шагов для часов и минут, а также отображение формата времени вместе с датой:

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

Это позволяет создавать детальные временные интервалы, например для отчетов или бронирования.

Резюме возможностей

  • Выбор диапазона: type="daterange" и type="datetimerange".
  • Форматирование: свойство format.
  • Локализация: locale.
  • Ограничение дат: disabledDate.
  • Максимальная длина диапазона: через onUpdate:value.
  • Интеграция с формами: валидация через rules.
  • Темизация и стили: theme-overrides и CSS-переменные.
  • Предустановленные диапазоны: через слот footer или пользовательские кнопки.
  • События: onUpdate:value, onFocus, onBlur, onConfirm.
  • Диапазоны с временем: type="datetimerange" с настройкой timePickerProps.

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

Оглавление