docs/en-US/component/time-picker.md
Use Time Picker for time input.
Can pick an arbitrary time.
:::demo By default, you can scroll the mouse wheel to pick time, alternatively you can use the control arrows when the arrow-control attribute is set.
time-picker/basic
:::
You can also limit the time range.
:::demo Limit the time range by specifying disabledHours disabledMinutes and disabledSeconds.
time-picker/basic-range
:::
Can pick an arbitrary time range.
:::demo We can pick a time range by adding an is-range attribute. Also, arrow-control is supported in range mode.
time-picker/range
:::
| Name | Description | Type | Default |
|---|---|---|---|
| model-value / v-model | binding value, if it is an array, the length should be 2 | ^[number] / ^[string] / ^[object]Date | [Date, Date] | [number, number] | [string, string] | '' |
| 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]'large' | 'default' | 'small' | — |
| 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] | '' |
| popper-style | custom style for TimePicker's dropdown | ^[string] / ^[object] | — |
| popper-options | Customized popper option see more at popper.js | ^[object]Partial<PopperOptions> | {} |
| fallback-placements ^(2.8.4) | list of possible positions for Tooltip popper.js | ^[array]Placement[] | ['bottom', 'top', 'right', 'left'] |
| placement ^(2.8.4) | position of dropdown | Placement | bottom |
| 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] / ^[array][Date, Date] | — |
| value-format | optional, format of binding value. If not specified, the binding value will be a Date object | ^[string] see date formats | — |
| id | same as id in native input | ^[string] / ^[array][string, string] | — |
| name | same as name in native input | ^[string] | '' |
| aria-label ^(a11y) ^(2.7.2) | 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](role: string, comparingDate?: Dayjs) => number[] | — |
| disabled-minutes | To specify the array of minutes that cannot be selected | ^[Function](hour: number, role: string, comparingDate?: Dayjs) => number[] | — |
| disabled-seconds | To specify the array of seconds that cannot be selected | ^[Function](hour: number, minute: number, role: string, comparingDate?: Dayjs) => number[] | — |
| teleported | whether time-picker dropdown is teleported to the body | ^[boolean] | true |
| tabindex | input tabindex | ^[string] / ^[number] | 0 |
| 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] | — |
| save-on-blur ^(2.13.4) | Whether to auto-fill the input with the current time on focus when no value is selected | ^[boolean] | true |
| label ^(a11y) ^(deprecated) | same as aria-label in native input | ^[string] | — |
| Name | Description | Type |
|---|---|---|
| change | triggers when user confirms the value | ^[Function](val: number | string | Date | [number, number] | [string, string] | [Date, Date]) => void |
| blur | triggers when Input blurs | ^[Function](e: FocusEvent) => void |
| focus | triggers when Input focuses | ^[Function](e: FocusEvent) => void |
| clear ^(2.7.7) | triggers when the clear icon is clicked in a clearable TimePicker | ^[Function]() => void |
| visible-change | triggers when the TimePicker's dropdown appears/disappears | ^[Function](visibility: boolean) => void |
| Name | Description | Type |
|---|---|---|
| focus | focus the TimePicker component | ^[Function]() => void |
| blur | blur the TimePicker component | ^[Function]() => void |
| handleOpen ^(2.2.16) | open the TimePicker popper | ^[Function]() => void |
| handleClose ^(2.2.16) | close the TimePicker popper | ^[Function]() => void |
type Placement =
| 'top'
| 'top-start'
| 'top-end'
| 'bottom'
| 'bottom-start'
| 'bottom-end'
| 'left'
| 'left-start'
| 'left-end'
| 'right'
| 'right-start'
| 'right-end'