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.

By default, you can scroll the mouse wheel to pick time, alternatively you can use the control arrows when the arrow-control attribute is set.

Limit the time range

You can also limit the time range.

Limit the time range by specifying disabledHours disabledMinutes and disabledSeconds.

Arbitrary time range

Can pick an arbitrary time range.

We can pick a time range by adding an is-range attribute. Also, arrow-control is supported in range mode.

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`	—
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

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	open the TimePicker popper	`Function`
handleClose	close the TimePicker popper	`Function`