TimePicker

Use Time Picker for time input.

TIP

This component requires the <client-only></client-only> wrap when used in SSR (eg: Nuxt) and SSG (eg: VitePress).

Arbitrary time picker

Can pick an arbitrary time.

Limit the time range

You can also limit the time range.

Arbitrary time range

Can pick an arbitrary time range.

API

Attributes

Name	Description	Type	Default
model-value / v-model	binding value, if it is an array, the length should be 2	`number` / `string` / `object`	''
readonly	whether TimePicker is read only	`boolean`	false
disabled	whether TimePicker is disabled	`boolean`	false
editable	whether the input is editable	`boolean`	true
clearable	whether to show clear button	`boolean`	true
size	size of Input	`enum`	—
placeholder	placeholder in non-range mode	`string`	''
start-placeholder	placeholder for the start time in range mode	`string`	—
end-placeholder	placeholder for the end time in range mode	`string`	—
is-range	whether to pick a time range	`boolean`	false
arrow-control	whether to pick time using arrow buttons	`boolean`	false
popper-class	custom class name for TimePicker's dropdown	`string`	''
range-separator	range separator	`string`	'-'
format	format of the displayed value in the input box	`string` see date formats	—
default-value	optional, default date of the calendar	`Date` / `object`	—
value-format	optional, format of binding value. If not specified, the binding value will be a Date object	`string` see date formats	—
id	same as `id` in native input	`string` / `object`	—
name	same as `name` in native input	`string`	''
label a11y	same as `aria-label` in native input	`string`	—
prefix-icon	Custom prefix icon component	`string` / `Component`	Clock
clear-icon	Custom clear icon component	`string` / `Component`	CircleClose
disabled-hours	To specify the array of hours that cannot be selected	`Function`	—
disabled-minutes	To specify the array of minutes that cannot be selected	`Function`	—
disabled-seconds	To specify the array of seconds that cannot be selected	`Function`	—
teleported	whether time-picker dropdown is teleported to the body	`boolean`	true
tabindex	input tabindex	`string` / `number`	0
empty-values 2.7.0	empty values of component, see config-provider	`array`	—
value-on-clear 2.7.0	clear return value, see config-provider	`string` / `number` / `boolean` / `Function`	—

Events

Name	Description	Type
change	triggers when user confirms the value	`Function`
blur	triggers when Input blurs	`Function`
focus	triggers when Input focuses	`Function`
visible-change	triggers when the TimePicker's dropdown appears/disappears	`Function`

Exposes

Name	Description	Type
focus	focus the Input component	`Function`
blur	blur the Input component	`Function`
handleOpen 2.2.16	open the TimePicker popper	`Function`
handleClose 2.2.16	close the TimePicker popper	`Function`