Datetime Picker

Компонент DateTime Picker в библиотеке Element Plus предназначен для выбора даты и времени в веб-приложениях на Vue 3. Он объединяет возможности календаря и временного селектора, позволяя пользователю удобно указывать точное значение даты и времени.

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

<script>
import { ref } from 'vue'

export default {
  setup() {
    const dateTime = ref(null)
    return { dateTime }
  }
}
</script>

Ключевые моменты:

v-model связывает выбранное значение с переменной состояния.
Атрибут type="datetime" объединяет выбор даты и времени.
placeholder задаёт текст подсказки внутри поля.

Типы DateTime Picker

Element Plus поддерживает несколько типов селекторов:

date — только дата.
daterange — диапазон дат.
datetime — дата и время.
datetimerange — диапазон дат с временем.
time — только время.
timerange — диапазон времени.

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

<el-date-picker
  v-model="range"
  type="datetimerange"
  start-placeholder="Начало"
  end-placeholder="Конец">
</el-date-picker>

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

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

Для настройки формата отображения даты и времени используется атрибут format. Он поддерживает стандартные шаблоны:

<el-date-picker
  v-model="dateTime"
  type="datetime"
  format="YYYY-MM-DD HH:mm:ss"
  value-format="YYYY-MM-DDTHH:mm:ssZ">
</el-date-picker>

format — формат отображения в интерфейсе.
value-format — формат, в котором данные будут храниться в переменной v-model.

Для локализации можно использовать объект locale:

import locale from 'element-plus/lib/locale/lang/ru'

app.use(ElementPlus, { locale })

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

Ограничение диапазона выбора

Для ограничения доступных дат применяются функции disabled-date и disabled-time:

<el-date-picker
  v-model="dateTime"
  type="datetime"
  :disabled-date="disablePastDates">
</el-date-picker>

<script>
function disablePastDates(time) {
  return time.getTime() < Date.now()
}
</script>

disabled-date принимает функцию, возвращающую true для недоступных дат.
disabled-time используется аналогично, но для времени.

Интерактивные события

Компонент поддерживает несколько событий:

change — вызывается при изменении значения.
blur — при потере фокуса.
focus — при получении фокуса.
visible-change — при открытии или закрытии календаря.

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

<el-date-picker
  v-model="dateTime"
  type="datetime"
  @change="handleChange">
</el-date-picker>

<script>
function handleChange(value) {
  console.log('Выбрана дата и время:', value)
}
</script>

Настройка шагов времени

Для выбора времени с определённой детализацией используется атрибут picker-options с объектом selectableRange и step:

<el-time-picker
  v-model="time"
  :picker-options="{ selectableRange: '09:00:00 - 18:00:00', step: '00:30:00' }"
  placeholder="Выберите время">
</el-time-picker>

selectableRange — диапазон доступного времени.
step — шаг выбора (например, каждые 30 минут).

Настройка отображения панели

Атрибут align контролирует выравнивание панели относительно поля ввода: left, center, right. Атрибут unlink-panels для диапазонов позволяет раздельно управлять календарями начала и конца периода.

<el-date-picker
  v-model="range"
  type="daterange"
  unlink-panels>
</el-date-picker>

Валидация и интеграция с формами

DateTime Picker полностью интегрируется с компонентом ElForm, поддерживая валидацию:

<el-form :model="form" :rules="rules" ref="formRef">
  <el-form-item label="Дата и время" prop="dateTime">
    <el-date-picker v-model="form.dateTime" type="datetime"></el-date-picker>
  </el-form-item>
</el-form>

<script>
const form = ref({ dateTime: null })
const rules = {
  dateTime: [
    { required: true, message: 'Дата и время обязательны', trigger: 'change' }
  ]
}
</script>

Это позволяет задавать обязательные поля, диапазоны дат и настраиваемые проверки.

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

DateTime Picker поддерживает слоты, например, для кастомного футера:

<el-date-picker v-model="dateTime" type="datetime">
  <template #footer>
    <el-button @click="setNow">Сейчас</el-button>
  </template>
</el-date-picker>

<script>
function setNow() {
  dateTime.value = new Date()
}
</script>

Это расширяет возможности компонента для создания более гибких интерфейсов.