默认主题
时间选择

示例

You selected:

You selected:
基础使用

基础用法,通过v-model双向绑定,值为时间字符串,并非Date对象。添加multiple属性可以支持多选;通过min max属性可以指定最小最大可选时间

index.vdt
index.js
index.vue (Vue)
index.jsx (React)
You selected:
时间范围

添加range属性,支持时间范围选择

index.vdt
index.js
index.vue (Vue)
index.jsx (React)
请选择时间
You selected:

请选择时间
You selected:
固定时间点

当指定了step属性时,组件将展示成Select样式,只能选择固定的几个时间点。通过minmax限定选择时间范围(默认:00:00:00 ~ 23:59:59),step指定步长,它们值类型都为时间字符串

@since v1.1.0 step不能隐藏“秒”,可以通过showFomartformat来格式化时间字符串

index.vdt
index.js
index.vue (Vue)
index.jsx (React)
You selected:
固定时间点范围选择

添加range属性,同时指定step可以展示固定时间点范围选择

index.vdt
index.js
index.vue (Vue)
index.jsx (React)
You selected:

请选择时间
You selected:

You selected:
格式化时间

组件内部使用dayjs处理日期对象,通过format属性,可以指定日期格式化字符串,默认的格式为:HH:mm:ss

format会同时格式化展示的字符串和最终的value值,如果你想分别对它们格式化,可以通过showFormat格式化展示的日期,通过valueFormat格式化value值,并且它们的优先级比format

如果你想给组件传入初始value值,但是该字符串不是默认格式,则必须指定format或者valueFormat。同时该属性也可以作用于max min属性

index.vdt
index.js
index.vue (Vue)
index.jsx (React)

属性

属性 说明 类型 默认值
value 当前选中的时间字符串 String undefind
clearable 是否能清空当前值 Boolean false
step 固定时间点的步长 String undefined
max 最大可选时间 String undefined
min 最小可选时间 String undefined
placeholder 占位文字 String "请选择时间"
disabled 是否禁用 Boolean false
multiple 是否支持多选 Boolean false
size 组件尺寸 "large" | "default" | "small" | "mini" "default"
range 是否选择时间范围 Boolean false
container 指定弹出选择层追加的位置,默认:Dialog类型的组件会追加到Dialog中,其他会追加到body中。你可以传入函数返回一个DOM用来作为插入的容器,或者传入字符串用来给querySelector进行查询 Function | String undefined
format 指定时间格式化字符串 String HH:mm:ss
valueFormat 指定value值时间格式化字符串 String undefined
showFormat 指定展示的时间格式化字符串 String undefined