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

В Vuetify компонент <v-date-picker> предоставляет гибкие возможности для выбора дат, включая установку ограничений на диапазон доступных значений, отключение определённых дат и динамическое управление выбором. Эти функции особенно важны для форм бронирования, планирования событий или любой ситуации, когда необходимо контролировать ввод даты.

Атрибуты min и max

min и max позволяют ограничить диапазон дат, доступных для выбора пользователем. Эти атрибуты принимают строки в формате YYYY-MM-DD. Примеры использования:

<v-date-picker
  v-model="selectedDate"
  :min="'2026-01-01'"
  :max="'2026-12-31'"
></v-date-picker>
  • min — минимальная допустимая дата.
  • max — максимальная допустимая дата.

При попытке выбрать дату вне диапазона элемент автоматически блокирует её, обеспечивая корректность данных.

Использование allowed-dates

Атрибут allowed-dates предоставляет более гибкий контроль, чем min и max. Он позволяет передавать функцию, которая возвращает true для разрешённых дат и false для запрещённых:

<v-date-picker
  v-model="selectedDate"
  :allowed-dates="isWeekday"
></v-date-picker>

<script>
export default {
  methods: {
    isWeekday(date) {
      const day = new Date(date).getDay();
      return day !== 0 && day !== 6; // разрешены только будние дни
    }
  }
}
</script>

Особенности allowed-dates:

  • Позволяет исключать отдельные дни недели, праздники, или динамически вычисляемые даты.
  • Поддерживает любые условия, которые могут быть реализованы через JavaScript-функции.
  • Совместим с диапазонным выбором дат (range).

Динамическое управление доступными датами

В реальных приложениях часто требуется динамически изменять ограничения, например, в зависимости от выбора другого поля. Для этого можно использовать реактивные переменные Vue и вычисляемые свойства:

<v-date-picker
  v-model="selectedDate"
  :allowed-dates="allowedDates"
></v-date-picker>

<script>
export default {
  data() {
    return {
      startDate: '2026-03-01',
      endDate: '2026-03-31'
    };
  },
  computed: {
    allowedDates() {
      return (date) => date >= this.startDate && date <= this.endDate;
    }
  }
}
</script>

Преимущество: любые изменения startDate или endDate мгновенно отражаются на доступных датах в календаре.

Ограничение выбора для диапазона (range)

Компонент <v-date-picker> поддерживает выбор диапазона дат через type="range". Ограничения применяются как к начальной, так и к конечной дате:

<v-date-picker
  v-model="dateRange"
  type="range"
  :min="'2026-03-01'"
  :max="'2026-03-31'"
></v-date-picker>
  • Начальная и конечная даты автоматически проверяются на соответствие ограничениям.
  • Можно комбинировать с allowed-dates, чтобы исключить отдельные дни внутри диапазона.

Отключение отдельных дат через disabled-dates

Vuetify предоставляет возможность полностью отключать определённые даты, используя disabled-dates. Это свойство работает аналогично allowed-dates, но логика инверсная: возвращаем true для дат, которые нельзя выбрать.

<v-date-picker
  v-model="selectedDate"
  :disabled-dates="disabledHolidays"
></v-date-picker>

<script>
export default {
  methods: {
    disabledHolidays(date) {
      const holidays = ['2026-03-08', '2026-03-21'];
      return holidays.includes(date);
    }
  }
}
</script>

Разница между allowed-dates и disabled-dates:

  • allowed-dates → только те даты, которые возвращают true, разрешены.
  • disabled-dates → даты, которые возвращают true, запрещены.

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

Настройка визуальных подсказок для недоступных дат

Vuetify автоматически стилизует недоступные даты, но есть возможность кастомизации через слоты и классы:

<v-date-picker
  v-model="selectedDate"
  :allowed-dates="isWeekday"
>
  <template v-slot:day="{ date, disabled }">
    <div :class="{ 'text--disabled': disabled, 'font-weight-bold': !disabled }">
      {{ new Date(date).getDate() }}
    </div>
  </template>
</v-date-picker>
  • Слот day позволяет полностью контролировать рендер каждой ячейки календаря.
  • Можно добавлять кастомные цвета, иконки или подсказки для недоступных дней.

Использование форматов и локализации

Ограничения работают корректно с любыми форматами даты, если используются стандарты ISO (YYYY-MM-DD). Для локализации календаря Vuetify предоставляет поддержку locale:

<v-date-picker
  v-model="selectedDate"
  :min="'2026-03-01'"
  :max="'2026-03-31'"
  locale="ru"
></v-date-picker>
  • Названия месяцев, дней недели и формат вывода автоматически адаптируются под выбранную локаль.
  • В сочетании с ограничениями это позволяет создавать полностью локализованные формы выбора дат.

Важные рекомендации

  • Для динамических ограничений всегда использовать реактивные переменные Vue, чтобы изменения автоматически отражались на календаре.
  • Проверки на стороне клиента через allowed-dates и disabled-dates не заменяют серверную валидацию.
  • Комбинируйте атрибуты min, max и функции allowed-dates для максимально точного контроля выбора дат.

Эти возможности делают <v-date-picker> в Vuetify мощным инструментом для реализации сложной логики работы с календарями и датами в веб-приложениях.

Оглавление