Date Picker

Компонент Date Picker в библиотеке Element Plus предназначен для выбора даты и времени с удобным интерфейсом календаря. Он поддерживает одиночный выбор даты, диапазон дат, а также выбор времени и месяцев. Использование Date Picker позволяет стандартизировать ввод даты и уменьшить вероятность ошибок при ручном вводе.

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

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

import { ElDatePicker } from 'element-plus';
import 'element-plus/dist/index.css';

export default {
  components: {
    ElDatePicker
  }
};

После регистрации компонент можно использовать в шаблоне Vue:

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

Здесь:

  • v-model связывает выбранную дату с переменной selectedDate.
  • type определяет тип выбора (date, datetime, daterange, datetimerange, month, week, year).
  • placeholder задает текст-подсказку для пустого поля.

Типы Date Picker

Element Plus предоставляет следующие типы выбора даты и времени:

  1. date – выбор одной даты.
  2. daterange – выбор диапазона дат.
  3. datetime – выбор даты с указанием времени.
  4. datetimerange – выбор диапазона дат с временем.
  5. month – выбор месяца.
  6. week – выбор недели.
  7. year – выбор года.

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

<el-date-picker
  v-model="dateRange"
  type="daterange"
  start-placeholder="Начальная дата"
  end-placeholder="Конечная дата">
</el-date-picker>

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

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

<el-date-picker
  v-model="selectedDate"
  type="date"
  format="dd/MM/yyyy"
  value-format="yyyy-MM-dd">
</el-date-picker>
  • format – задает отображение даты в интерфейсе.
  • value-format – формат, в котором значение будет передаваться в модель (v-model).

Это особенно важно при работе с серверными API, где требуется конкретный формат даты.

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

Для ограничения доступных дат применяются атрибуты disabled-date и default-value.

methods: {
  disabledDate(time) {
    return time.getTime() < Date.now() - 86400000; // запрещает выбор дат до сегодняшнего дня
  }
}
<el-date-picker
  v-model="selectedDate"
  type="date"
  :disabled-date="disabledDate">
</el-date-picker>

Функция disabledDate должна возвращать true для дат, которые нельзя выбрать.

Выбор времени

Компонент позволяет включить выбор времени через type="datetime" или type="datetimerange":

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

Атрибуты:

  • picker-options – объект для детальной настройки (например, ограничение времени).
  • format и value-format работают аналогично типу date.
pickerOptions: {
  selectableRange: '09:00:00 - 18:00:00' // ограничение выбора времени
}

Настройка локали

Элемент календаря поддерживает разные локали через импорт locale из Element Plus:

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

locale.use(ru);

После этого все подписи в календаре будут отображаться на русском языке.

Стиль и кастомизация

Элемент можно стилизовать через классы и SCSS переменные. Например, изменение цвета активной даты:

.el-picker-panel__body .cell.is-selected {
  background-color: #409eff;
  color: #fff;
}

Для более тонкой настройки используются слоты prefix и suffix, позволяющие добавлять иконки или текст перед и после поля.

Использование Date Picker в форме

Компонент хорошо интегрируется с формами Element Plus, поддерживает валидацию и правила:

<el-form :model="form" ref="formRef">
  <el-form-item label="Дата события" prop="eventDate" :rules="[{ required: true, message: 'Выберите дату', trigger: 'change' }]">
    <el-date-picker v-model="form.eventDate" type="date" placeholder="Выберите дату"></el-date-picker>
  </el-form-item>
</el-form>

Правила валидации позволяют контролировать обязательность выбора и корректность даты.

Резюме возможностей

  • Одиночный выбор даты, диапазоны, время, месяцы и годы.
  • Форматирование и кастомизация формата даты и времени.
  • Ограничение выбора с помощью disabled-date и picker-options.
  • Локализация интерфейса для разных языков.
  • Интеграция с формами и поддержка правил валидации.
  • Кастомизация внешнего вида через CSS и слоты.

Date Picker в Element Plus предоставляет мощный и гибкий инструмент для работы с датами и временем, позволяя создавать удобный и надежный пользовательский интерфейс.

Оглавление