TimeSelect ​

Use Time Select for time input.

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

Fixed time picker ​

Provide a list of fixed time for users to choose.

Use el-time-select label, then assign start time, end time and time step with start, end and step.

Select time

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

Select time

Fixed time range ​

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

Start time
End time

API ​

Attributes ​

NameDescriptionTypeDefault
model-value / v-modelbinding valuestring—
disabledwhether TimeSelect is disabledbooleanfalse
editablewhether the input is editablebooleantrue
clearablewhether to show clear buttonbooleantrue
include-end-time 2.9.3whether end is included in optionsbooleanfalse
sizesize of Inputenumdefault
placeholderplaceholder in non-range modestring—
name 2.13.3same 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—
popper-class 2.11.4custom class name for TimeSelect's dropdownstring''
popper-style 2.11.4custom style for TimeSelect's dropdownstring / object—

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 ​

Component • Style • Docs

Contributors ​