Time Select

Use Time Select for time input.

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

Basic usage

Provide a list of fixed time for users to choose.

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

Time Formats

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

Check the list hereopen in new window 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.

Attributes

NameDescriptionTypeAccepted ValuesDefault
model-value / v-modelbinding valuestring——
disabledwhether TimeSelect is disabledboolean—false
editablewhether the input is editableboolean—true
clearablewhether to show clear buttonboolean—true
sizesize of Inputstringlarge / default / smalldefault
placeholderplaceholder in non-range modestring——
namesame as name in native inputstring——
prefix-iconCustom prefix icon componentstring | Component—History
clear-iconCustom clear icon componentstring | Component—Close
startstart timestring—09:00
endend timestring—18:00
steptime stepstring—00:30
min-timeminimum time, any time before this time will be disabledstring—00:00
max-timemaximum time, any time after this time will be disabledstring——
formatset format of timestringsee formatsopen in new windowHH:mm

Events

NameDescriptionParameters
changetriggers when user confirms the valuecomponent's binding value
blurtriggers when Input blurs(event: FocusEvent)
focustriggers when Input focuses(event: FocusEvent)

Methods

MethodDescriptionParameters
focusfocus the Input component—
blurblur the Input component—
Last Updated:
Contributors: Tam Mai