Форматирование дат

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

Компонент v-date-picker

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

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

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

<script>
export default {
  data() {
    return {
      selectedDate: null,
      locale: 'ru'
    }
  }
}
</script>
  • v-model связывает выбранную дату с переменной состояния.
  • locale задает локализацию, влияя на формат вывода и названия месяцев.

Форматирование даты

Для преобразования даты в удобочитаемый формат часто используется объект Date и метод toLocaleDateString, интегрированный с Vuetify.

computed: {
  formattedDate() {
    return this.selectedDate 
      ? new Date(this.selectedDate).toLocaleDateString('ru-RU', {
          day: 'numeric',
          month: 'long',
          year: 'numeric'
        })
      : '';
  }
}
  • day: 'numeric' выводит день числа без ведущего нуля.
  • month: 'long' выводит полное название месяца на выбранном языке.
  • year: 'numeric' отображает полный год.

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

Vuetify позволяет использовать маски для текстовых полей с датами через v-text-field и свойство mask. Это полезно для стандартизации формата ввода.

<v-text-field
  v-model="dateInput"
  label="Введите дату"
  mask="##.##.####"
  placeholder="дд.мм.гггг"
/>
  • Маска "##.##.####" гарантирует правильное расположение цифр и разделителей.
  • Комбинируя маску с v-date-picker, можно обеспечить синхронизацию визуального выбора и текстового ввода.

Форматирование диапазонов дат

Компонент v-date-picker поддерживает выбор диапазонов через range режим:

<v-date-picker v-model="dateRange" range></v-date-picker>

Для отображения диапазона в читаемом виде можно использовать вычисляемое свойство:

computed: {
  formattedRange() {
    if (!this.dateRange || this.dateRange.length < 2) return '';
    const [start, end] = this.dateRange;
    return `${new Date(start).toLocaleDateString('ru-RU')} — ${new Date(end).toLocaleDateString('ru-RU')}`;
  }
}

Это позволяет выводить диапазон дат в формате "01 января 2026 — 15 января 2026".

Локализация и международные стандарты

Vuetify интегрируется с библиотекой @vuetify/locale и поддерживает стандарт ISO 8601. Для локализации можно указать locale на уровне приложения или компонента.

import { createVuetify } from 'vuetify'
import ru from 'vuetify/locale/ru'

const vuetify = createVuetify({
  locale: {
    locale: 'ru',
    messages: { ru }
  }
})
  • Поддержка ISO 8601 позволяет хранить даты в формате YYYY-MM-DD, а отображать в удобном для пользователя виде.
  • Использование локалей автоматически изменяет названия месяцев, дней недели и формат даты.

Взаимодействие с библиотеками форматирования

Для более сложного форматирования дат часто используют библиотеку date-fns или dayjs, совместимую с Vuetify.

Пример с date-fns:

import { format } from 'date-fns'
import { ru } from 'date-fns/locale'

computed: {
  formattedDateFns() {
    return this.selectedDate 
      ? format(new Date(this.selectedDate), 'd MMMM yyyy', { locale: ru })
      : '';
  }
}
  • Это позволяет задавать кастомные шаблоны отображения, включая сокращенные месяцы, дни недели и нестандартные форматы.

Стилизация календаря и дат

Vuetify предоставляет свойства для визуального выделения дат:

  • color — задает цвет выбранной даты.
  • active-picker — управление активным видом (date, month, year).
  • first-day-of-week — настройка первого дня недели.
<v-date-picker
  v-model="selectedDate"
  color="primary"
  first-day-of-week="1"
></v-date-picker>
  • Позволяет адаптировать компонент под корпоративные стандарты или пользовательские требования к интерфейсу.

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

При работе с формами Vuetify удобно использовать v-form для валидации даты:

<v-form ref="form">
  <v-date-picker v-model="selectedDate" required></v-date-picker>
</v-form>
  • Атрибут required и методы валидации позволяют убедиться, что дата была выбрана перед отправкой формы.
  • С помощью вычисляемых свойств или масок можно приводить данные к единому формату для серверной части.

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

Оглавление