TimePicker 时间选择器

用于选择或输入日期

TIP

在 SSR 场景下,您需要将组件包裹在 <client-only></client-only> 之中 (如: Nuxt) 和 SSG (e.g: VitePress).

任意时间点

可以选择任意时间

限制时间选择范围

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

任意时间范围

可选择任意的时间范围

API

Attributes

属性名说明类型默认
model-value / v-model绑定值,如果它是数组,长度应该是 2number / string / object''
readonly完全只读booleanfalse
disabled禁用booleanfalse
editable文本框可输入booleantrue
clearable是否显示清除按钮booleantrue
size输入框尺寸enum
placeholder非范围选择时的占位内容string''
start-placeholder范围选择时开始日期的占位内容string
end-placeholder范围选择时结束日期的占位内容string
is-range是否为时间范围选择booleanfalse
arrow-control是否使用箭头进行时间选择booleanfalse
popper-classTimePicker 下拉框的类名string''
range-separator选择范围时的分隔符string'-'
format显示在输入框中的格式string see date formats
default-value可选,选择器打开时默认显示的时间Date / object
value-format可选,绑定值的格式。 不指定则绑定值为 Date 对象string 参考 日期格式
id等价于原生 input id 属性string / object
name等价于原生 input name 属性string''
label a11y等价于原生 input aria-label 属性string
prefix-icon自定义前缀图标string / ComponentClock
clear-icon自定义清除图标string / ComponentCircleClose
disabled-hours禁止选择部分小时选项Function
disabled-minutes禁止选择部分分钟选项Function
disabled-seconds禁止选择部分秒选项Function
teleported是否将 popover 的下拉列表镜像至 body 元素booleantrue
tabindex输入框的 tabindexstring / number0

事件

事件名说明类型
change用户确认选定的值时触发Function
blur在组件 Input 失去焦点时触发Function
focus在组件 Input 获得焦点时触发Function
visible-change当 TimePicker 的下拉列表出现/消失时触发Function

暴露

名称说明Type
focus使 input 获取焦点Function
blur使 input 失去焦点Function
handleOpen 2.2.16打开时间选择器弹窗Function
handleClose 2.2.16关闭时间选择器弹窗Function

源代码

组件文档

贡献者