El Time Select

TimeSelect Component

TimeSelect provides selection from fixed time options.

When to Use

• Fixed time selection
• Schedule slots
• Appointment times
• Business hours

Basic Usage

<template>
  <el-time-select
    v-model="value"
    start="08:30"
    step="00:15"
    end="18:30"
    placeholder="Select time"
  />
</template>

<script setup>
import { ref } from 'vue'

const value = ref('')
</script>

Time Range

<template>
  <el-time-select
    v-model="startTime"
    placeholder="Start time"
    start="08:30"
    step="00:30"
    end="18:30"
    :max-time="endTime"
  />
  <el-time-select
    v-model="endTime"
    placeholder="End time"
    start="08:30"
    step="00:30"
    end="18:30"
    :min-time="startTime"
  />
</template>

<script setup>
import { ref } from 'vue'

const startTime = ref('')
const endTime = ref('')
</script>

Time Format

<template>
  <el-time-select
    v-model="value"
    format="HH:mm A"
    start="08:00"
    step="01:00"
    end="18:00"
  />
</template>

API Reference

Attributes

Events

Exposes

Best Practices

1. Use min-time/max-time for range validation
2. Set appropriate step for use case
3. Use format for custom display