Выбор даты v-date-picker

Компонент v-date-picker в Vuetify предназначен для выбора даты и удобного взаимодействия с календарем. Он поддерживает как одиночный выбор даты, так и диапазоны, а также интегрируется с формами и другими элементами пользовательского интерфейса.

Ключевые свойства:

  • v-model — двусторонняя привязка выбранной даты.
  • type — определяет тип выбора: 'date', 'month', 'year' или 'range'.
  • min и max — задают минимальные и максимальные даты для ограничения выбора.
  • locale — локализация календаря, например 'ru' для русского языка.
  • readonly — делает компонент только для чтения, запрет выбора даты.
  • disabled — полностью блокирует взаимодействие.

Пример базовой реализации:

<template>
  <v-date-picker v-model="selectedDate" :min="minDate" :max="maxDate"></v-date-picker>
</template>

<script>
export default {
  data() {
    return {
      selectedDate: null,
      minDate: '2026-01-01',
      maxDate: '2026-12-31'
    }
  }
}
</script>

Настройка диапазона дат

Для выбора диапазона используется тип 'range'. При этом v-model связывается с объектом вида { start: 'YYYY-MM-DD', end: 'YYYY-MM-DD' }. Можно ограничивать диапазон минимальной и максимальной датой, а также кастомизировать визуальное отображение выбранного периода.

Пример:

<v-date-picker
  v-model="dateRange"
  type="range"
  :min="minDate"
  :max="maxDate"
></v-date-picker>

<script>
export default {
  data() {
    return {
      dateRange: { start: null, end: null },
      minDate: '2026-01-01',
      maxDate: '2026-12-31'
    }
  }
}
</script>

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

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

Пример с русской локализацией:

<v-date-picker
  v-model="selectedDate"
  locale="ru"
></v-date-picker>

Возможные значения locale: 'en', 'ru', 'fr', 'de' и другие.

Пользовательские шаблоны и слоты

v-date-picker поддерживает кастомизацию отдельных частей через слоты:

  • day — позволяет изменить отображение дней календаря.
  • header — кастомизация заголовка с месяцем и годом.
  • actions — настройка кнопок подтверждения и отмены.

Пример изменения внешнего вида дней:

<v-date-picker v-model="selectedDate">
  <template #day="{ day, outside }">
    <div :class="{ 'special-day': day === '2026-03-17' }">{{ day }}</div>
  </template>
</v-date-picker>

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

Для ограничения выбора дат применяются allowed-dates и min/max. Свойство allowed-dates принимает функцию, которая возвращает 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>

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

v-date-picker легко интегрируется с формами Vuetify через v-form и валидацию. Можно использовать стандартные правила валидации:

<v-form ref="form">
  <v-date-picker
    v-model="selectedDate"
    :rules="[dateRequired]"
  ></v-date-picker>
</v-form>

<script>
export default {
  data() {
    return {
      selectedDate: null
    }
  },
  methods: {
    dateRequired(value) {
      return !!value || 'Выбор даты обязателен'
    }
  }
}
</script>

Работа с временем и комбинированный выбор

Для выбора времени используется v-time-picker, который может быть встроен совместно с v-date-picker для создания комплексного выбора даты и времени. В связке можно использовать модальные окна и диалоги для более компактного интерфейса.

Пример комбинированного выбора даты и времени:

<v-dialog v-model="dialog" persistent width="290px">
  <template #activator="{ props }">
    <v-text-field v-model="dateTime" readonly v-bind="props"></v-text-field>
  </template>
  <v-date-picker v-model="date" @change="onDateChange">
    <v-time-picker v-if="showTime" v-model="time"></v-time-picker>
  </v-date-picker>
</v-dialog>

Стилизация и темы

Vuetify позволяет легко менять визуальный стиль календаря через theme, color и кастомные CSS классы. Применение цвета к выбранной дате или диапазону делается через свойство color:

<v-date-picker v-model="selectedDate" color="primary"></v-date-picker>

Для отдельных дней можно использовать динамические классы через слот day для выделения праздников, выходных или специальных событий.

Динамическая загрузка данных

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

Пример подсветки занятых дат:

<v-date-picker
  v-model="selectedDate"
  :allowed-dates="dateAvailable"
>
  <template #day="{ day }">
    <div :class="{ 'occupied-day': occupiedDates.includes(day) }">{{ day }}</div>
  </template>
</v-date-picker>

<script>
export default {
  data() {
    return {
      selectedDate: null,
      occupiedDates: ['2026-03-10', '2026-03-15']
    }
  },
  methods: {
    dateAvailable(date) {
      return !this.occupiedDates.includes(date)
    }
  }
}
</script>

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

Основные события v-date-picker:

  • @input — вызывается при выборе даты.
  • @change — вызывается при подтверждении выбора.
  • @update:modelValue — реактивное обновление v-model.
  • @dayclick — клик по конкретному дню календаря.

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

Оглавление