TimeSelect 时间选择

用于选择或输入日期

import { createApp } from 'vue'
import { ElTimeSelect } from '@szhn/dh-design-pc'

const app = createApp()
app.use(ElTimeSelect)

固定时间点

提供几个固定的时间点供用户选择

时间格式

使用 format 属性来控制时间格式 (小时以及分钟)。

在 这里 查看 Day.js 支持的 format 参数。

注意

WARNING 请一定要注意传入参数的大小写是否正确

固定时间范围

如果先选中了开始（或结束）时间，则结束（或开始）时间的状态也将会随之改变。

禁用状态

通过 disabled 属性禁用组件，或通过 min-time / max-time 限制可选时间段。

API

Attributes

属性名	说明	类型	默认值
model-value / v-model	选中项绑定值	string	—
disabled	禁用状态	boolean	false
editable	文本框可输入	boolean	true
clearable	是否显示清除按钮	boolean	true
include-end-time	是否在选项中包含end	boolean	false
size	输入框尺寸	enum	default
placeholder	非范围选择时的占位内容	string	—
name	原生属性	string	—
effect	Tooltip 主题，内置了 dark / light 两种主题	string / enum	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	组件的空值配置， 参考config-provider	array	—
value-on-clear	清空选项的值， 参考config-provider	string / number / boolean / Function	—
popper-class	为 TimeSelect 下拉面板设置自定义类名	string	''
popper-style	为 TimeSelect 下拉面板设置自定义样式	string / object	—

Events

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

Exposes

方法名	说明	类型
focus	使 input 获取焦点	Function
blur	使 input 失去焦点	Function