TimePicker 时间选择器

用于输入时间。

任意时间点

可以选择任意时间。

限制时间范围

您也可以限制时间范围。

任意时间范围

可以选择任意时间范围。

API

属性

名称	描述	类型	默认值
model-value / v-model	绑定值，如果它是数组，长度应该是 2	`number` / `string` / `object`	''
只读	时间选择器是否只读	`boolean`	false
disabled	时间选择器是否被禁用	`boolean`	false
可编辑	输入框是否可编辑	`boolean`	true
可清空	是否显示清除按钮	`boolean`	true
size	输入框尺寸	`枚举`	—
占位符	非范围选择时的占位内容	`string`	''
start-placeholder	范围选择时开始时间的占位内容	`string`	—
end-placeholder	范围选择时结束时间的占位内容	`string`	—
is-range	是否为时间范围选择	`boolean`	false
arrow-control	是否使用箭头进行时间选择	`boolean`	false
popper-class	TimePicker 下拉框的自定义类名	`string`	''
popper-style	TimePicker 下拉框的自定义样式	`string` / `object`	—
popper-options	自定义 popper 选项，更多请看 popper.js	`object`	{}
fallback-placements 2.8.4	Tooltip 的可能位置列表 popper.js	`array`	['bottom', 'top', 'right', 'left']
placement 2.8.4	下拉框出现的位置	`位置`	bottom
range-separator	选择范围时的分隔符	`string`	'-'
format	输入框中显示值的格式	`string` 详见日期格式	—
default-value	可选，选择器打开时默认显示的时间	`Date` / `object`	—
value-format	可选，绑定值的格式。如果未指定，则绑定值为 Date 对象	`string` 详见日期格式	—
id	与原生 input 的 `id` 属性相同	`string` / `object`	—
名称	与原生输入框的 `name` 相同	`string`	''
aria-label a11y 2.7.2	与原生输入框的 `aria-label` 相同	`string`	—
前缀图标	自定义前缀图标组件	`string` / `Component`	时钟
clear-icon	自定义清除图标组件	`string` / `Component`	CircleClose
disabled-hours	指定不可选择的小时数组	`Function`	—
disabled-minutes	指定不可选择的分钟数组	`Function`	—
disabled-seconds	指定不可选择的秒数数组	`Function`	—
teleported	时间选择器下拉框是否插入到 body 元素上	`boolean`	true
tabindex	输入框的 tabindex	`string` / `number`	0
empty-values 2.7.0	组件的空值，参见 config-provider	`array`	—
value-on-clear 2.7.0	清除返回值，参见 config-provider	`string` / `number` / `boolean` / `Function`	—
label a11y 已废弃	与原生输入框的 `aria-label` 相同	`string`	—

事件

名称	描述	类型
change	当用户确认选定的值时触发	`Function`
blur	在 Input 失去焦点时触发	`Function`
focus	在 Input 获得焦点时触发	`Function`
clear 2.7.7	在可清空的时间选择器中点击清空图标时触发	`Function`
visible-change	当 TimePicker 的下拉列表出现/消失时触发	`Function`

暴露

名称	描述	类型
focus	聚焦 TimePicker 组件	`Function`
blur	使 TimePicker 组件失焦	`Function`
handleOpen 2.2.16	打开 TimePicker 弹窗	`Function`
handleClose 2.2.16	关闭 TimePicker 弹窗	`Function`

类型声明

显示声明

type Placement =
  | 'top'
  | 'top-start'
  | 'top-end'
  | 'bottom'
  | 'bottom-start'
  | 'bottom-end'
  | 'left'
  | 'left-start'
  | 'left-end'
  | 'right'
  | 'right-start'
  | 'right-end'