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
| Name | Description | Type | Default |
|---|---|---|---|
| model-value / v-model | binding value, if it is an array, the length should be 2 | number / string / object | '' |
| readonly | whether TimePicker is read only | boolean | false |
| disabled | whether TimePicker 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 | — |
| placeholder | placeholder in non-range mode | string | '' |
| start-placeholder | placeholder for the start time in range mode | string | — |
| end-placeholder | placeholder for the end time in range mode | string | — |
| is-range | whether to pick a time range | boolean | false |
| arrow-control | whether to pick time using arrow buttons | boolean | false |
| popper-class | custom class name for TimePicker's dropdown | string | '' |
| range-separator | range separator | string | '-' |
| format | format of the displayed value in the input box | string see date formats | — |
| default-value | optional, default date of the calendar | Date / object | — |
| id | same as id in native input | string / object | — |
| name | same as name in native input | string | '' |
| label a11y | same as aria-label in native input | string | — |
| prefix-icon | Custom prefix icon component | string / Component | Clock |
| clear-icon | Custom clear icon component | string / Component | CircleClose |
| disabled-hours | To specify the array of hours that cannot be selected | Function | — |
| disabled-minutes | To specify the array of minutes that cannot be selected | Function | — |
| disabled-seconds | To specify the array of seconds that cannot be selected | Function | — |
| teleported | whether time-picker dropdown is teleported to the body | boolean | true |
| tabindex | input tabindex | string / number | 0 |
Events
| Name | Description | Type |
|---|---|---|
| change | triggers when user confirms the value | Function |
| blur | triggers when Input blurs | Function |
| focus | triggers when Input focuses | Function |
| visible-change | triggers when the TimePicker's dropdown appears/disappears | Function |
Exposes
| Name | Description | Type |
|---|---|---|
| focus | focus the Input component | Function |
| blur | blur the Input component | Function |
| handleOpen 2.2.16 | open the TimePicker popper | Function |
| handleClose 2.2.16 | close the TimePicker popper | Function |