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

NameDescriptionTypeDefault
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

Events

NameDescriptionType
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

Exposes

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

Source

ComponentDocs

Contributors