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

В библиотеке Naive UI компонент DatePicker является мощным инструментом для выбора даты и времени, предоставляя гибкие возможности настройки ограничений выбора. Управление ограничениями необходимо для предотвращения выбора недопустимых дат пользователем, например, для форм бронирования, регистрации событий или планирования задач.

Использование свойства disabled-date

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

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

const app = createApp({
  template: `
    <n-date-picker
      v-model:value="selectedDate"
      :disabled-date="isDisabledDate"
    />
  `,
  data() {
    return {
      selectedDate: null
    };
  },
  methods: {
    isDisabledDate(date) {
      // Блокировка всех дат до текущего дня
      const today = new Date();
      return date < today;
    }
  }
});

app.mount('#app');

В этом примере все даты, предшествующие текущему дню, будут недоступны для выбора. Функция isDisabledDate получает объект Date и должна возвращать булево значение.

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

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

isDisabledDate(date) {
  const today = new Date();
  const maxDate = new Date();
  maxDate.setMonth(today.getMonth() + 3); // ограничение до 3 месяцев вперед
  return date < today || date > maxDate;
}

Таким образом, пользователь сможет выбирать только даты в пределах текущего дня и следующих трёх месяцев.

Ограничение дней недели

Иногда требуется разрешить выбор только определённых дней недели. Для этого также используется disabled-date:

isDisabledDate(date) {
  // Запрещаем выбор выходных (суббота и воскресенье)
  const day = date.getDay();
  return day === 0 || day === 6;
}

Функция getDay() возвращает день недели (0 — воскресенье, 6 — суббота), что позволяет легко управлять рабочими и нерабочими днями.

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

Компоненты DatePicker с включённой временной частью (type="datetime") позволяют ограничивать выбор времени с помощью свойства time-picker-props. Пример ограничения времени на рабочий день:

<n-date-picker
  v-model:value="selectedDateTime"
  type="datetime"
  :time-picker-props="{
    disabledHours: () => Array.from({ length: 24 }, (_, i) => i).filter(h => h < 9 || h > 18),
    disabledMinutes: () => [],
    disabledSeconds: () => []
  }"
/>

Здесь запрещены часы до 9:00 и после 18:00. Списки минут и секунд оставлены пустыми, но их также можно ограничивать при необходимости.

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

Для более тонкой настройки можно комбинировать disabled-date и time-picker-props:

<n-date-picker
  v-model:value="selectedDateTime"
  type="datetime"
  :disabled-date="date => date.getDay() === 0 || date.getDay() === 6"
  :time-picker-props="{
    disabledHours: () => Array.from({ length: 24 }, (_, i) => i).filter(h => h < 9 || h > 18)
  }"
/>

В этом случае:

  • Запрещён выбор выходных;
  • Ограничено время рабочего дня.

Ограничение диапазона с помощью min-date и max-date

Для упрощённого ограничения диапазона дат можно использовать свойства min-date и max-date. Они автоматически блокируют выбор за пределами заданного диапазона:

<n-date-picker
  v-model:value="selectedDate"
  :min-date="new Date()"
  :max-date="new Date(new Date().setMonth(new Date().getMonth() + 3))"
/>

Этот способ особенно удобен для статических диапазонов, когда нет необходимости в сложной логике.

Комбинация нескольких ограничений

Все перечисленные методы могут комбинироваться для достижения максимально точного контроля:

  • disabled-date — для сложной динамической логики;
  • min-date / max-date — для статического диапазона;
  • time-picker-props — для ограничения времени внутри дня.

Пример комплексного ограничения:

<n-date-picker
  v-model:value="appointment"
  type="datetime"
  :min-date="new Date()"
  :max-date="new Date(new Date().setMonth(new Date().getMonth() + 1))"
  :disabled-date="date => date.getDay() === 0 || date.getDay() === 6"
  :time-picker-props="{
    disabledHours: () => Array.from({ length: 24 }, (_, i) => i).filter(h => h < 9 || h > 17)
  }"
/>

В этом примере доступные даты — только рабочие дни в течение следующего месяца, а время — только с 9:00 до 17:00.

Практические рекомендации

  • Для динамических ограничений использовать disabled-date с функцией, возвращающей true для запрещённых дат.
  • Для простого диапазона min-date и max-date ускоряют разработку и делают код читаемым.
  • Комбинация disabled-date и time-picker-props позволяет создавать сложные графики доступности.
  • Всегда проверять локальные настройки времени и часового пояса, чтобы ограничения корректно учитывали реальное время.

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

Оглавление