QDate и QTime пикеры

QDate и QTime — это мощные компоненты библиотеки Quasar, предназначенные для работы с выбором дат и времени в веб-приложениях на Vue.js. Они предоставляют гибкий и настраиваемый интерфейс, поддерживают локализацию, различные форматы и множество событий для взаимодействия с приложением.

Основные свойства QDate

QDate позволяет пользователю выбирать одну или несколько дат, а также управлять диапазонами дат. Основные свойства компонента включают:

  • v-model: связывает выбранную дату с переменной в Vue-компоненте. Например:
<q-date v-model="selectedDate" />

selectedDate будет содержать значение даты в формате YYYY-MM-DD.

  • mask: определяет формат даты для отображения. Пример:
<q-date v-model="selectedDate" mask="DD/MM/YYYY" />
  • options: функция, которая позволяет блокировать определённые даты. Например, для блокировки выходных:
<q-date
  v-model="selectedDate"
  :options="dateOptions"
/>

methods: {
  dateOptions(date) {
    const day = new Date(date).getDay();
    return day !== 0 && day !== 6;
  }
}
  • locale: позволяет использовать локализацию, например, русскую:
<q-date v-model="selectedDate" locale="ru" />
  • range: включает выбор диапазона дат, возвращая массив из двух дат:
<q-date v-model="dateRange" range />
  • first-day-of-week: задаёт первый день недели, что особенно полезно для разных регионов:
<q-date v-model="selectedDate" first-day-of-week="1" />

Основные свойства QTime

QTime используется для выбора времени с точностью до часов, минут и секунд. Ключевые свойства:

  • v-model: привязка времени к переменной. Например:
<q-time v-model="selectedTime" />

Формат значения по умолчанию — HH:mm:ss.

  • format24h: определяет использование 24-часового формата. Если false, отображается 12-часовой формат с AM/PM:
<q-time v-model="selectedTime" format24h />
  • min и max: задают диапазон допустимого времени:
<q-time v-model="selectedTime" min="09:00" max="18:00" />
  • with-seconds: включает отображение и выбор секунд:
<q-time v-model="selectedTime" with-seconds />
  • step: определяет шаг изменения времени (например, шаг минут):
<q-time v-model="selectedTime" :minutes-step="15" />

Настройка внешнего вида и поведения

Quasar предоставляет богатые возможности кастомизации как QDate, так и QTime:

  • color и text-color: управляют цветовой схемой элементов:
<q-date v-model="selectedDate" color="primary" text-color="white" />

  • navigation-icon и arrows: позволяют изменять иконки навигации между месяцами.

  • events: массив объектов, которые могут отображаться на календаре с подсветкой. Например:

<q-date
  v-model="selectedDate"
  :events="events"
  color="secondary"
/>

data() {
  return {
    events: ['2026-03-20', '2026-03-25']
  }
}
  • header-title-format: позволяет изменять формат заголовка месяца. Например:
<q-date v-model="selectedDate" header-title-format="MMMM YYYY" />

Работа с диапазонами и множественным выбором

QDate поддерживает не только одиночный выбор, но и диапазоны:

  • range: возвращает массив двух дат [startDate, endDate].
  • multiple: позволяет выбирать несколько несвязанных дат, возвращая массив строк.

Пример множественного выбора с ограничением:

<q-date
  v-model="selectedDates"
  multiple
  :options="dateOptions"
/>

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

QDate и QTime отлично интегрируются с QForm и валидацией Quasar:

<q-form @submit="submitForm">
  <q-date v-model="selectedDate" :rules="[date => !!date || 'Выберите дату']" />
  <q-time v-model="selectedTime" :rules="[time => !!time || 'Выберите время']" />
  <q-btn type="submit" label="Отправить" color="primary" />
</q-form>

Метод submitForm получает актуальные значения и может выполнять обработку данных.

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

  • @input: срабатывает при изменении значения даты или времени.
  • @update:model-value: аналогично v-model, позволяет отслеживать изменения.
  • @focus / @blur: события фокуса, полезные для управления визуальными эффектами или валидацией.

Практические рекомендации

  • Всегда использовать локализацию для корректного отображения дней недели и месяцев.
  • Для больших приложений удобно использовать mask и format24h для согласованного формата данных.
  • Для ограничения выборки дат применять options, избегая некорректных пользовательских вводов.
  • При работе с диапазонами использовать массивы и проверку на пустые значения перед отправкой формы.
  • Цветовые схемы и события календаря делают интерфейс интерактивным и более информативным для пользователя.

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

Оглавление