TimeSelect

Use Time Select for time input.

The available time range is 00:00 to 23:59

TIP

This component requires the <client-only></client-only> wrap when used in SSR (eg: Nuxt) and SSG (eg: VitePress).

Fixed time picker

Provide a list of fixed time for users to choose.

Time Formats

Use format to control format of time(hours and minutes).

Check the list here of all available formats of Day.js.

WARNING

Pay attention to capitalization

Fixed time range

If start( end ) time is picked at first, then the status of end( start ) time's options will change accordingly.

API

Attributes

NameDescriptionTypeDefault
model-value / v-modelbinding valuestring
disabledwhether TimeSelect is disabledbooleanfalse
editablewhether the input is editablebooleantrue
clearablewhether to show clear buttonbooleantrue
sizesize of Inputenumdefault
placeholderplaceholder in non-range modestring
namesame as name in native inputstring
effectTooltip theme, built-in theme: dark / lightstring / enumlight
prefix-iconcustom prefix icon componentstring / ComponentClock
clear-iconcustom clear icon componentstring / ComponentCircleClose
startstart timestring09:00
endend timestring18:00
steptime stepstring00:30
min-timeminimum time, any time before this time will be disabledstring
max-timemaximum time, any time after this time will be disabledstring
formatset format of timestring see formatsHH:mm
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 TimeSelectFunction

Exposes

MethodDescriptionType
focusfocus the Input componentFunction
blurblur the Input componentFunction

Source

ComponentDocs

Contributors