Use Time Picker for time input.


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.



model-value / v-modelbinding value, if it is an array, the length should be 2number / string / object''
readonlywhether TimePicker is read onlybooleanfalse
disabledwhether TimePicker is disabledbooleanfalse
editablewhether the input is editablebooleantrue
clearablewhether to show clear buttonbooleantrue
sizesize of Inputenum
placeholderplaceholder in non-range modestring''
start-placeholderplaceholder for the start time in range modestring
end-placeholderplaceholder for the end time in range modestring
is-rangewhether to pick a time rangebooleanfalse
arrow-controlwhether to pick time using arrow buttonsbooleanfalse
popper-classcustom class name for TimePicker's dropdownstring''
range-separatorrange separatorstring'-'
formatformat of the displayed value in the input boxstring see date formats
default-valueoptional, default date of the calendarDate / object
value-formatoptional, format of binding value. If not specified, the binding value will be a Date objectstring see date formats
idsame as id in native inputstring / object
namesame as name in native inputstring''
label a11y deprecatedsame as aria-label in native inputstring
aria-label a11y 2.7.2same as aria-label in native inputstring
prefix-iconCustom prefix icon componentstring / ComponentClock
clear-iconCustom clear icon componentstring / ComponentCircleClose
disabled-hoursTo specify the array of hours that cannot be selectedFunction
disabled-minutesTo specify the array of minutes that cannot be selectedFunction
disabled-secondsTo specify the array of seconds that cannot be selectedFunction
teleportedwhether time-picker dropdown is teleported to the bodybooleantrue
tabindexinput tabindexstring / number0
empty-values 2.7.0empty values of component, see config-providerarray
value-on-clear 2.7.0clear return value, see config-providerstring / number / boolean / Function


changetriggers when user confirms the valueFunction
blurtriggers when Input blursFunction
focustriggers when Input focusesFunction
clear 2.7.7triggers when the clear icon is clicked in a clearable TimePickerFunction
visible-changetriggers when the TimePicker's dropdown appears/disappearsFunction


focusfocus the Input componentFunction
blurblur the Input componentFunction
handleOpen 2.2.16open the TimePicker popperFunction
handleClose 2.2.16close the TimePicker popperFunction