date работа с датами

Quasar предоставляет мощный набор инструментов для работы с датами, интегрируя собственные утилиты и возможности Vue.js. Основная цель — упрощение форматирования, парсинга и манипуляций с датами в приложениях.

Утилита date из Quasar

Quasar включает модуль date, доступный через импорт из quasar. Он предоставляет функции для форматирования, сравнения и вычисления разницы между датами. Пример импорта:

import { date } from 'quasar'

Ключевые функции:

  • formatDate(value, options) — форматирует дату согласно переданным опциям.
  • addToDate(value, { days, months, years, hours, minutes, seconds }) — добавляет или вычитает временные интервалы.
  • getDateDiff(date1, date2, unit) — вычисляет разницу между датами в указанных единицах (например, ‘days’, ‘hours’).
  • isValidDate(value) — проверяет корректность даты.
  • cloneDate(value) — создаёт копию даты.

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

Функция formatDate позволяет задавать формат даты через шаблоны:

date.formatDate(new Date(), 'YYYY-MM-DD HH:mm:ss') // 2026-03-20 14:35:00
date.formatDate(new Date(), { format: 'DD MMMM YYYY' }) // 20 марта 2026

Поддерживаемые токены формата:

  • YYYY — полный год
  • YY — две последние цифры года
  • MM — месяц с ведущим нулём
  • DD — день месяца с ведущим нулём
  • HH — часы 24-часового формата
  • hh — часы 12-часового формата
  • mm — минуты
  • ss — секунды
  • A / a — AM/PM

Примеры локализации:

date.formatDate(new Date(), { format: 'DD MMMM YYYY', locale: 'ru' }) // 20 марта 2026
date.formatDate(new Date(), { format: 'dddd, D MMMM YYYY', locale: 'ru' }) // пятница, 20 марта 2026

Парсинг и валидация дат

Для работы с пользовательским вводом необходимо проверять корректность и преобразовывать строки в объекты Date:

const input = '2026-03-20'
const parsed = new Date(input)
if (date.isValidDate(parsed)) {
  console.log('Дата корректна')
}

В Quasar нет отдельного метода парсинга строк, отличного от стандартного Date, но isValidDate позволяет надежно проверять результат.

Добавление и вычитание времени

Функция addToDate позволяет легко модифицировать дату:

const today = new Date()

const nextWeek = date.addToDate(today, { days: 7 })
const lastMonth = date.addToDate(today, { months: -1 })
const inTwoHours = date.addToDate(today, { hours: 2, minutes: 30 })

Можно комбинировать несколько единиц времени одновременно:

const future = date.addToDate(today, { years: 1, months: 2, days: 10 })

Вычисление разницы между датами

getDateDiff возвращает разницу между датами в нужных единицах:

const start = new Date('2026-03-01')
const end = new Date('2026-03-20')

const diffDays = date.getDateDiff(start, end, 'days') // 19
const diffHours = date.getDateDiff(start, end, 'hours') // 456

Поддерживаемые единицы: 'milliseconds', 'seconds', 'minutes', 'hours', 'days', 'weeks', 'months', 'years'.

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

QDate — компонент выбора даты. Основные свойства:

  • v-model — связка с датой.
  • mask — формат отображения (YYYY-MM-DD, DD/MM/YYYY).
  • locale — локализация отображаемых месяцев и дней недели.
  • options — функция фильтрации доступных дат.

Пример:

<q-date
  v-model="selectedDate"
  mask="DD.MM.YYYY"
  locale="ru"
  :options="date => date.getDay() !== 0"
/>

QTime — компонент выбора времени:

  • v-model — привязка к времени в формате HH:mm:ss.
  • format24h — включение 24-часового формата.
  • min / max — ограничение времени.

Локализация

Quasar поддерживает русскую локализацию для компонентов даты и времени через lang:

import { Quasar, date } from 'quasar'
import langRu from 'quasar/lang/ru'

Quasar.lang.set(langRu)

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

Дополнительные функции

  • cloneDate — создание копии даты для безопасных манипуляций.
  • extractDate — выделение отдельных частей даты (год, месяц, день, час, минута, секунда):
const d = new Date()
const year = date.extractDate(d, 'year')
const month = date.extractDate(d, 'month')
  • compareDate — сравнение двух дат, возвращает -1, 0 или 1.

Практические советы

  • Для международных приложений всегда использовать локализацию locale.
  • При работе с пользовательским вводом применять isValidDate и addToDate для корректного изменения дат.
  • Использовать QDate и QTime для визуального выбора дат и времени, что минимизирует ошибки ввода.
  • Комбинировать formatDate и getDateDiff для отображения удобного и понятного формата времени пользователю.

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

Оглавление