Use Time Picker for time input.

Arbitrary time picker

Can pick an arbitrary time.

Arbitrary time range

Can pick an arbitrary time range.


AttributeDescriptionTypeAccepted ValuesDefault
model-value / v-modelbinding valueDate
readonlywhether TimePicker is read onlybooleanfalse
disabledwhether TimePicker is disabledbooleanfalse
editablewhether the input is editablebooleantrue
clearablewhether to show clear buttonbooleantrue
sizesize of Inputstringmedium / small / mini
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
alignalignmentleft / center / rightleft
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 for TimePicker, string for TimeSelectanything accepted by new Date() for TimePicker, selectable value for TimeSelect
namesame as name in native inputstring
prefix-iconCustom prefix icon classstringel-icon-time
clear-iconCustom clear icon classstringel-icon-circle-close
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)


Event NameDescriptionParameters
changetriggers when user confirms the valuecomponent's binding value
blurtriggers when Input blurscomponent instance
focustriggers when Input focusescomponent instance


focusfocus the Input component
blurblur the Input component