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

В библиотеке Element Plus для работы с датами и временем предоставляются гибкие и настраиваемые компоненты, в первую очередь это DatePicker и TimePicker, а также вспомогательные утилиты для форматирования.

Компонент DatePicker

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

  • date — выбор одной даты.
  • daterange — выбор диапазона дат.
  • datetime — выбор даты с временем.
  • datetimerange — диапазон дат с временем.
  • month — выбор месяца.
  • year — выбор года.
  • week — выбор недели.

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

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

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

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

Символ Описание
yyyy Год, 4 цифры
yy Год, 2 цифры
MM Месяц, 2 цифры
M Месяц, 1-2 цифры
dd День, 2 цифры
d День, 1-2 цифры
HH Часы 24-часовой формат
hh Часы 12-часовой формат
mm Минуты
ss Секунды
a AM/PM

Пример настройки формата:

<el-date-picker
  v-model="selectedDate"
  type="datetime"
  format="yyyy-MM-dd HH:mm:ss"
  value-format="yyyy-MM-dd HH:mm:ss"
  placeholder="Выберите дату и время">
</el-date-picker>
  • format определяет отображение даты в интерфейсе.
  • value-format задаёт формат, в котором дата будет храниться в модели Vue.

Локализация

Для корректного отображения дат на разных языках используется пакет локализации Element Plus. Например, для русской локализации:

import { ElDatePicker } from 'element-plus';
import ru from 'element-plus/es/locale/lang/ru';

app.use(ElDatePicker, { locale: ru });

После подключения локали месяцы и дни недели будут отображаться на русском.

Ограничения выбора

Для ограничения доступных дат используются свойства disabled-date и default-time:

<el-date-picker
  v-model="selectedDate"
  type="date"
  :disabled-date="disablePastDates"
  placeholder="Выберите дату">
</el-date-picker>

<script>
export default {
  methods: {
    disablePastDates(date) {
      return date < new Date(); // блокирует даты в прошлом
    }
  }
}
</script>

Компонент TimePicker

TimePicker позволяет выбирать только время. Основные свойства:

  • format — формат отображения времени.
  • value-format — формат хранения в модели.
  • picker-options — позволяет задавать ограничения (например, шаг минут, интервал часов).

Пример:

<el-time-picker
  v-model="selectedTime"
  format="HH:mm"
  value-format="HH:mm:ss"
  :picker-options="{ selectableRange: '09:00:00 - 18:00:00' }"
  placeholder="Выберите время">
</el-time-picker>

Работа с диапазонами

Диапазон дат и времени поддерживает выделение интервалов. Используются свойства start-placeholder и end-placeholder для обозначения полей:

<el-date-picker
  v-model="selectedRange"
  type="daterange"
  start-placeholder="Начало"
  end-placeholder="Конец"
  format="dd.MM.yyyy"
  value-format="yyyy-MM-dd">
</el-date-picker>

Для datetimerange аналогично:

<el-date-picker
  v-model="selectedDateTimeRange"
  type="datetimerange"
  start-placeholder="Начало"
  end-placeholder="Конец"
  format="dd.MM.yyyy HH:mm"
  value-format="yyyy-MM-dd HH:mm:ss">
</el-date-picker>

Пользовательские форматы и отображение

Element Plus поддерживает кастомизацию через слот prefix и suffix для добавления иконок или текста рядом с полем. Также можно использовать методы форматирования через библиотеку dayjs или date-fns для преобразования дат перед выводом:

import dayjs from 'dayjs';

computed: {
  formattedDate() {
    return dayjs(this.selectedDate).format('DD MMMM YYYY, HH:mm');
  }
}

Поддержка реактивных изменений

Компоненты Element Plus полностью интегрированы с реактивной системой Vue. Изменение значения модели автоматически обновляет отображение, а при изменении формата дата пересчитывается в соответствии с новым шаблоном.

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

Оглавление