mirror of https://github.com/element-plus/element-plus.git synced 2026-03-13 07:51:17 +08:00

Files

Rainbow c039171ecb docs(components): [tooltip/time-picker/datetime-picker] add the missing prop about popper (#22284 )

* docs: add the missing prop about popper

* docs: update

* docs: update

2025-09-23 17:29:47 +08:00

13 KiB

Raw Blame History

title, lang

title	lang
TimePicker	en-US

TimePicker

Use Time Picker for time input.

Arbitrary time picker

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

:::

Limit the time range

You can also limit the time range.

:::demo Limit the time range by specifying disabledHours disabledMinutes and disabledSeconds.

time-picker/basic-range

:::

Arbitrary time 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

:::

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	^[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] / ^[object]`[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] / ^[object]`[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]	—
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

type Placement =
  | 'top'
  | 'top-start'
  | 'top-end'
  | 'bottom'
  | 'bottom-start'
  | 'bottom-end'
  | 'left'
  | 'left-start'
  | 'left-end'
  | 'right'
  | 'right-start'
  | 'right-end'

13 KiB Raw Blame History