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.


NameDescriptionTypeAccepted ValuesDefault
model-value / v-modelbinding value, if it is an array, the length should be 2Date / number / string / Array
readonlywhether TimePicker is read onlybooleanfalse
disabledwhether TimePicker is disabledbooleanfalse
editablewhether the input is editablebooleantrue
clearablewhether to show clear buttonbooleantrue
sizesize of Inputstringlarge / default / small
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 boxstringsee date formatsHH:mm:ss
default-valueoptional, default date of the calendarDate / [Date, Date]
idsame as id in native inputstring / [string, string]-
namesame as name 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(selectedHour)
disabled-secondsTo specify the array of seconds that cannot be selectedFunction(selectedHour, selectedMinute)
teleportedwhether time-picker dropdown is teleported to the bodybooleantrue / falsetrue


changetriggers when user confirms the value(val: typeof v-model)
blurtriggers when Input blurs(e: FocusEvent)
focustriggers when Input focuses(e: FocusEvent)
visible-changetriggers when the TimePicker's dropdown appears/disappears(visibility: boolean)


focusfocus the Input component
blurblur the Input component
handleOpenopen the TimePicker popper
handleCloseclose the TimePicker popper