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
Name | Description | Type | Default |
---|---|---|---|
model-value / v-model | binding value | string | — |
disabled | whether TimeSelect is disabled | boolean | false |
editable | whether the input is editable | boolean | true |
clearable | whether to show clear button | boolean | true |
size | size of Input | enum | default |
placeholder | placeholder in non-range mode | string | — |
name | same as name in native input | string | — |
effect | Tooltip theme, built-in theme: dark / light | string / enum | light |
prefix-icon | custom prefix icon component | string / Component | Clock |
clear-icon | custom clear icon component | string / Component | CircleClose |
start | start time | string | 09:00 |
end | end time | string | 18:00 |
step | time step | string | 00:30 |
min-time | minimum time, any time before this time will be disabled | string | — |
max-time | maximum time, any time after this time will be disabled | string | — |
format | set format of time | string see formats | HH:mm |
empty-values 2.7.0 | empty values of component, see config-provider | array | — |
value-on-clear 2.7.0 | clear return value, see config-provider | string / number / boolean / Function | — |
Events
Name | Description | Type |
---|---|---|
change | triggers when user confirms the value | Function |
blur | triggers when Input blurs | Function |
focus | triggers when Input focuses | Function |
Exposes
Method | Description | Type |
---|---|---|
focus | focus the Input component | Function |
blur | blur the Input component | Function |