Использование компонентов datepicker в Vue для выбора дат

Главная

База знаний

vue

Основы работы с Vue.js

08 июля 2025

Автор

Олег Марков

Введение

В современных веб-приложениях вам часто требуется предоставить пользователям удобный и красивый способ выбора дат — будь то календарь отпуска, бронирование мероприятия или обычная форма фильтрации по времени. Для этих целей в Vue-разработке активно применяются компоненты datepicker (выбор даты). Они позволяют организовать выбор одной или нескольких дат, времени, диапазонов, а также предоставляют расширенную кастомизацию без необходимости писать сложную логику вручную.

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

Зачем использовать datepicker в Vue

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

Валидация дат, входящих в определённый диапазон
Работа с интернационализацией и локалью (месяцы, первый день недели, формат даты)
Выбор диапазона дат
Интеграция с формами и моделями данных
Адаптация к мобильным устройствам и разметке

Использование готового компонента datepicker позволяет:

Быстро внедрить надёжный UX с календарём
Гибко настроить стили и поведение без написания сложной логики
Интернационализировать ваш календарь под нужную аудиторию
Экономить время и повышать надёжность обработки даты

Установка и интеграция Vue3-Datepicker

Установка

Для начала покажу, как добавить компонент в проект Vue 3.

npm install vue3-datepicker

Подключение к компоненту

Для локального использования в файле вашего компонента:

<script setup>
import Datepicker from 'vue3-datepicker'
import { ref } from 'vue'

const selectedDate = ref(null)
</script>

<template>
  <Datepicker v-model="selectedDate" />
</template>

// Здесь мы импортируем компонент, создаём реактивное состояние selectedDate и связываем его с компонентом датапикера через v-model. Каждый раз, когда пользователь выбирает дату, переменная selectedDate обновляется.

Основные параметры и кастомизация

Ограничение доступных дат

Многие приложения требуют ограничивать, какие даты доступны пользователю (например, чтобы запретить выбор прошедших дат).

<Datepicker 
  v-model="selectedDate" 
  :min-date="new Date()" // Только сегодняшнее число и позднее
/>

// min-date и max-date позволяют ограничить диапазон выбора дат.

Выбор диапазона дат (range selection)

Если вы делаете интерфейс для бронирования или отпуска — удобно дать выбрать сразу от и до.

<script setup>
import Datepicker from 'vue3-datepicker'
import { ref } from 'vue'

const range = ref([])
</script>

<template>
  <Datepicker v-model="range" range />
</template>

// Благодаря параметру range теперь можно выбирать диапазон дат. В массиве range первое значение — начало диапазона, второе — окончание.

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

Компонент поддерживает настройку отображения (например, день-месяц-год или месяц-день-год), а также локализацию названий месяцев и дней недели.

<script setup>
import Datepicker from 'vue3-datepicker'
import { ru } from 'date-fns/locale' // Импортируем русскую локаль
import { ref } from 'vue'

const selectedDate = ref(null)
</script>

<template>
  <Datepicker
    v-model="selectedDate"
    :format="date => date.toLocaleDateString('ru-RU')"
    :locale="ru"
  />
</template>

// Здесь мы задаём кастомную функцию форматирования и указываем русскую локаль, чтобы интерфейс был на русском.

Масштабирование и внешний вид

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

<Datepicker
  v-model="selectedDate"
  dropdown-class="my-dropdown-style"
  input-class="my-input-style"
/>

// dropdown-class и input-class — способы передать классы для стилизации выпадающего календаря и самого поля ввода.

Обработка событий и взаимодействие с формами

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

@update:model-value — вызывается при изменении выбранной даты
@open — при открытии календаря
@close — при закрытии

Пример использования событий

<Datepicker
  v-model="selectedDate"
  @update:model-value="onDateChange"
  @open="onOpen"
  @close="onClose"
/>

<script setup>
function onDateChange(date) {
  // Выполняйте тут нужную логику (например, отправку или валидацию)
  console.log(`Выбрана дата: ${date}`)
}

function onOpen() {
  // Реакция на открытие календаря
  console.log('Календарь открыт')
}

function onClose() {
  // Реакция на закрытие календаря
  console.log('Календарь закрыт')
}
</script>

Интеграция с формами (на примере Vee-Validate)

Если вы хотите использовать datepicker как часть формы с валидацией:

<template>
  <Form @submit="onSubmit">
    <Field name="birthday" rules="required" v-slot="{ field, meta, errors }">
      <Datepicker v-model="field.value" />
      <span v-if="errors.length">{{ errors[0] }}</span>
    </Field>
    <button type="submit">Сохранить</button>
  </Form>
</template>

// Здесь мы используем Vee-Validate для валидации поля с датой, ошибок и обработки формы.

Дополнительные возможности и полезные параметры

Выбор времени (datetime picker)

Многие datepickers поддерживают выбор времени. В Vue3-Datepicker этого нет “из коробки”, но во Vue ecosystem есть компоненты типа vue3-timepicker, либо используйте Element Plus/Vuetify.

Пример для Element Plus:

<el-date-picker
  v-model="datetime"
  type="datetime"
  placeholder="Выберите дату и время"
/>

Отключение дней/выделение определённых дат

Некоторые datepicker поддерживают функцию disableDate:

<Datepicker
  v-model="selectedDate"
  :disabled-date="isWeekend"
/>

<script setup>
function isWeekend(date) {
  // Отключать выходные (суббота, воскресенье)
  const day = date.getDay()
  return day === 0 || day === 6
}
</script>

Кастомные слоты

Более сложные UI часто требуют вставить свою кнопку today, кастомное сообщение или иконку. Многие компоненты реализуют слоты, например:

<Datepicker>
  <template #icon>
    <svg>...</svg> <!-- Ваша SVG-иконка -->
  </template>
</Datepicker>

Сравнение с другими компонентами на примере Vuetify

Если ваш проект использует Vuetify, способ внедрения чуть отличается.

<template>
  <v-date-picker v-model="date" :min="new Date()" :max="nextYear" show-adjacent-months />
</template>

<script setup>
import { ref } from 'vue'

const date = ref(null)
const nextYear = new Date(new Date().getFullYear() + 1, 11, 31)
</script>

Vuetify предоставляет огромный список опций: выбор типа (date, month, year), support разных тем, интеграция с v-text-field и v-form.

Советы и лучшие практики

Проверяйте, что выбранная дата сохраняется в нужном формате. Очень часто дата сохраняется как объект Date, но серверу может требоваться ISO-строка.
Если вы используете SSR (Nuxt), проверяйте, что component поддерживает SSR или загружайте его только на клиенте через dynamic import.
Для локализации всегда используйте внешний пакет локалей (например, date-fns/locale или moment.js), а не пишите свои массивы месяцев и дней недели.
Не забывайте про доступность и навигацию с клавиатуры — особенно если у вас корпоративное или сложное приложение.
Тестируйте работу на мобильных устройствах — иногда поведение в touch-интерфейсах иное.

Заключение

Компоненты datepicker существенно упрощают работу с датами в интерфейсах на Vue. С их помощью вы быстро внедрите выбор даты, диапазона или времени с валидацией, поддержкой локализации и кастомизации под дизайн вашего приложения. На рынке есть множество решений как для “чистого” Vue (Vue3-Datepicker), так и для крупных UI-библиотек (Element Plus, Vuetify). Грамотный выбор datepicker и правильная интеграция позволят вам повысить удобство и надёжность работы с датами в проекте, снизить количество ошибок, а также облегчить дальнейшее сопровождение кода.

Частозадаваемые технические вопросы по теме и ответы

Как задать начальную выбранную дату в datepicker?

Чтобы сразу установить выбранное значение, присвойте нужную дату переменной, связанной через v-model. Например: js const selectedDate = ref(new Date('2024-07-01'))

Как передать выбранную дату на сервер в виде строки?

Используйте метод toISOString() для объекта Date: js const isoDate = selectedDate.value.toISOString() Это позволит отправить дату в формате YYYY-MM-DDTHH:mm:ss.sssZ.

Можно ли сделать выбор сразу нескольких дат не подряд (multi-date)?

Многие компоненты поддерживают только range. Но некоторые (например, Element Plus) позволяют multi-selection: html <el-date-picker v-model="dates" type="dates" /> Где dates — массив дат.

Как сгенерировать массив дат между двумя датами из диапазона?

Для создания массива дней воспользуйтесь простым скриптом: js function getDatesInRange(start, end) { const dates = [] let current = new Date(start) while (current <= end) { dates.push(new Date(current)) current.setDate(current.getDate() + 1) } return dates }

Как реализовать динамическое ограничение min/max дат по событиям?

Сделайте min-date и max-date реактивными переменными: js const minDate = ref(new Date()) const maxDate = computed(() => new Date(minDate.value.getFullYear(), minDate.value.getMonth() + 1, 0)) <Datepicker :min-date="minDate" :max-date="maxDate" /> Теперь диапазон будет меняться по нужной вам логике.