TimePicker 时间选择器

用于选择或输入日期

任意时间点

可以选择任意时间

限制时间选择范围

您也可以限制时间选择范围。

任意时间范围

可选择任意的时间范围

TimePicker 属性

属性说明类型可选值默认值
model-value / v-model选中项绑定值Date
readonly完全只读booleanfalse
disabled禁用booleanfalse
editable文本框可输入booleantrue
clearable是否显示清除按钮booleantrue
size输入框尺寸stringlarge / default / small
placeholder非范围选择时的占位内容string
start-placeholder范围选择时开始日期的占位内容string
end-placeholder范围选择时结束日期的占位内容string
is-range是否为时间范围选择booleanfalse
arrow-control是否使用箭头进行时间选择booleanfalse
popper-classTimePicker 下拉框的类名string
range-separator选择范围时的分隔符string'-'
format显示在输入框中的格式string请查看 date formatsHH:mm:ss
default-value可选,选择器打开时默认显示的时间Date(TimePicker) / string(TimeSelect)可被new Date()解析(TimePicker) / 可选值(TimeSelect)
id等价于原生 input id 属性string / array(string)字符串 id="my-time" range 模式 数组 :id="['my-range-start', 'my-range-end']"-
name等价于原生 input name 属性string
prefix-icon自定义前缀图标string / ComponentClock
clear-icon自定义清除图标string / ComponentCircleClose
disabled-hours禁止选择部分小时选项function
disabled-minutes禁止选择部分分钟选项function(selectedHour)
disabled-seconds禁止选择部分秒选项function(selectedHour, selectedMinute)
teleported是否将 popover 的下拉列表镜像至 body 元素booleantrue / falsetrue

TimePicker 事件

事件名说明回调参数
change用户确认选定的值时触发(val: typeof v-model)
blur在组件 Input 失去焦点时触发(e: FocusEvent)
focus在组件 Input 获得焦点时触发(e: FocusEvent)
visible-change当 TimePicker 的下拉列表出现/消失时触发(visibility: boolean)

TimePicker 方法

方法名说明参数
focus使 input 获取焦点
blur使 input 失去焦点

源代码

组件文档

贡献者