Time Select 时间选择

用于在固定时间点列表中选择时间。VISTA B 直接使用 Element Plus 的 el-time-select，可通过开始时间、结束时间和步长生成可选项。

固定时间点

使用 start、end 和 step 指定起始时间、结束时间和间隔时间。

请选择时间

<template>
  <el-time-select
    v-model="value"
    style="width: 240px"
    start="08:30"
    step="00:15"
    end="18:30"
    placeholder="请选择时间"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'

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

时间格式

通过 format 控制面板和输入框展示的时间格式。格式规则遵循 Day.js，例如 HH:mm 为 24 小时制，hh:mm A 为 12 小时制。

12 小时制

<template>
  <el-time-select
    v-model="value"
    style="width: 240px"
    start="00:00"
    step="00:30"
    end="23:59"
    placeholder="12 小时制"
    format="hh:mm A"
  />
</template>

固定时间范围

通过 min-time 和 max-time 可以让开始时间与结束时间互相约束，避免选择无效的时间范围。

开始时间

结束时间

<template>
  <el-time-select
    v-model="startTime"
    :max-time="endTime"
    placeholder="开始时间"
    start="08:30"
    step="00:15"
    end="18:30"
  />
  <el-time-select
    v-model="endTime"
    :min-time="startTime"
    placeholder="结束时间"
    start="08:30"
    step="00:15"
    end="18:30"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'

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

禁用与可清空

设置 disabled 可以禁用选择器；clearable 控制是否显示清除按钮。

禁用状态

<template>
  <el-time-select v-model="value" clearable placeholder="可清空" />
  <el-time-select v-model="disabledValue" disabled placeholder="禁用状态" />
</template>

不同尺寸

size 支持 large、default、small 三种尺寸，用于适配不同密度的表单区域。

Large

Default

Small

<template>
  <el-time-select v-model="large" size="large" placeholder="Large" />
  <el-time-select v-model="defaultValue" placeholder="Default" />
  <el-time-select v-model="small" size="small" placeholder="Small" />
</template>

Time Select API

Time Select 属性

属性名	说明	类型	默认值
model-value / v-model	选中项绑定值	string	-
disabled	是否禁用	boolean	false
editable	文本框是否可输入	boolean	true
clearable	是否显示清除按钮	boolean	true
include-end-time	是否在选项中包含 end 时间	boolean	false
size	输入框尺寸	large | default | small	default
placeholder	占位文本	string	-
name	原生 input 的 name 属性	string	-
effect	Tooltip 主题	dark | light	light
prefix-icon	自定义前缀图标	string | component	Clock
clear-icon	自定义清除图标	string | component	CircleClose
start	开始时间	string	09:00
end	结束时间	string	18:00
step	间隔时间	string	00:30
min-time	最早时间点，早于该时间的选项会被禁用	string	-
max-time	最晚时间点，晚于该时间的选项会被禁用	string	-
format	时间展示格式	string	HH:mm
empty-values	组件的空值配置	array	-
value-on-clear	清空时设置的值	string | number | boolean | function	-
popper-class	下拉面板的自定义类名	string	''
popper-style	下拉面板的自定义样式	string | object	-

Time Select 事件

事件名	说明	类型
change	用户确认选定值时触发	Function
blur	组件失去焦点时触发	Function
focus	组件获得焦点时触发	Function
clear	点击清空按钮时触发	Function

Time Select 暴露

名称	说明	类型
focus	使输入框获得焦点	Function
blur	使输入框失去焦点	Function