--- title: Time Picker 时间选择器 --- # Time Picker 时间选择器 Use Time Picker for time input. ## Arbitrary time picker Can pick an arbitrary time. :::example 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 ::: ## Limit the time range You can also limit the time range. :::example Limit the time range by specifying `disabledHours` `disabledMinutes` and `disabledSeconds`. time-picker/basic-range ::: ## Arbitrary time range Can pick an arbitrary time range. :::example We can pick a time range by adding an `is-range` attribute. Also, `arrow-control` is supported in range mode. time-picker/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]`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](https://popper.js.org/docs/v2/) | ^[object]`Partial` | {} | | fallback-placements ^(2.8.4) | list of possible positions for Tooltip [popper.js](https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements) | ^[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](/docs/component/date-picker#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](/docs/component/date-picker#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](/docs/component/config-provider#empty-values-configurations) | ^[array] | — | | value-on-clear ^(2.7.0) | clear return value, [see config-provider](/docs/component/config-provider#empty-values-configurations) | ^[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] | — | ### Events | 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` | ### Exposes | 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 Declarations
Show declarations ```ts type Placement = | 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end' ```