Time Picker

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

<template>
  <el-time-picker
    v-model="time"
    placeholder="Выберите время">
  </el-time-picker>
</template>

<script>
export default {
  data() {
    return {
      time: ''
    };
  }
};
</script>

Здесь v-model связывает выбранное время с переменной time. Атрибут placeholder задает подсказку для пользователя.

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

Time Picker поддерживает форматирование через атрибут format. По умолчанию используется 'HH:mm:ss'. Можно использовать более простые форматы, например 'HH:mm' для отображения только часов и минут.

<el-time-picker
  v-model="time"
  placeholder="Выберите время"
  format="HH:mm">
</el-time-picker>

Для внутреннего значения, передаваемого через v-model, можно задать отдельный формат через value-format:

<el-time-picker
  v-model="time"
  placeholder="Выберите время"
  format="HH:mm"
  value-format="HH:mm:ss">
</el-time-picker>
  • format – отображаемый формат времени.
  • value-format – формат значения, сохраняемого в переменной.

Включение секунд

По умолчанию выбор секунд отключен. Для их включения используется атрибут is-seconds:

<el-time-picker
  v-model="time"
  placeholder="Выберите время"
  :is-seconds="true">
</el-time-picker>

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

Диапазон времени

Time Picker поддерживает выбор диапазона времени с помощью компонента el-time-picker в режиме range:

<el-time-picker
  v-model="timeRange"
  is-range
  range-separator="до"
  start-placeholder="Начало"
  end-placeholder="Конец">
</el-time-picker>

<script>
export default {
  data() {
    return {
      timeRange: []
    };
  }
};
</script>
  • is-range – включает режим диапазона.
  • range-separator – текст между началом и концом диапазона.
  • start-placeholder и end-placeholder – подсказки для начала и конца.

Интервалы времени

Для ограничения выбора по шагу используется атрибут picker-options:

<el-time-picker
  v-model="time"
  :picker-options="{
    selectableRange: '09:00:00 - 18:00:00',
    step: '00:15:00'
  }"
  placeholder="Выберите время">
</el-time-picker>
  • selectableRange задает допустимый диапазон времени.
  • step определяет шаг между вариантами времени, например 15 минут (00:15:00).

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

Управление форматом 12/24 часов

Для отображения времени в 12-часовом формате используется атрибут format с индикатором AM/PM:

<el-time-picker
  v-model="time"
  placeholder="Выберите время"
  format="hh:mm a"
  value-format="HH:mm:ss">
</el-time-picker>
  • hh – часы в 12-часовом формате.
  • a – добавляет AM/PM.

Это особенно полезно для приложений, ориентированных на международную аудиторию.

Валидация и управление состоянием

Компонент интегрируется с Element Plus Form для валидации времени:

<el-form :model="form" :rules="rules" ref="formRef">
  <el-form-item label="Время начала" prop="startTime">
    <el-time-picker v-model="form.startTime" placeholder="Выберите время"></el-time-picker>
  </el-form-item>
</el-form>

<script>
export default {
  data() {
    return {
      form: {
        startTime: ''
      },
      rules: {
        startTime: [
          { required: true, message: 'Время обязательно', trigger: 'change' }
        ]
      }
    };
  }
};
</script>

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

Стилизация и пользовательский интерфейс

Компонент Time Picker поддерживает кастомизацию через слоты и CSS-переменные. Например, можно изменить иконку или добавить кнопки быстрого выбора времени:

<el-time-picker v-model="time" placeholder="Выберите время">
  <template #suffix>
    <i class="el-icon-time"></i>
  </template>
</el-time-picker>

CSS-переменные позволяют изменить цвета, размер шрифта и отступы, что упрощает интеграцию в любую тему оформления.

Динамическое управление

В Element Plus можно динамически менять диапазоны и шаги выбора времени:

<el-time-picker
  v-model="time"
  :picker-options="pickerOptions"
  placeholder="Выберите время">
</el-time-picker>

<script>
export default {
  data() {
    return {
      time: '',
      pickerOptions: {
        selectableRange: '08:00:00 - 20:00:00',
        step: '00:30:00'
      }
    };
  },
  mounted() {
    setTimeout(() => {
      this.pickerOptions.step = '00:15:00';
    }, 5000);
  }
};
</script>

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

Использование с функциями форматирования и событиями

Компонент поддерживает события change, blur и focus, что позволяет выполнять дополнительные действия при изменении значения:

<el-time-picker
  v-model="time"
  @change="handleChange"
  placeholder="Выберите время">
</el-time-picker>

<script>
export default {
  data() {
    return {
      time: ''
    };
  },
  methods: {
    handleChange(value) {
      console.log('Выбрано время:', value);
    }
  }
};
</script>

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

Эти возможности делают Time Picker гибким инструментом для создания интерфейсов выбора времени в приложениях на Vue 3 с использованием Element Plus.

Оглавление