时间选择

示例

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指定步长,它们值类型都为时间字符串,指定时可以省略秒,但是组件会添加秒(00)

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

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

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