element-plus/docs/en-US/component/time-select.md

title	lang
TimeSelect	en-US

TimeSelect

Use Time Select for time input.

The available time range is 00:00 to 23:59

Fixed time picker

Provide a list of fixed time for users to choose.

:::demo Use el-time-select label, then assign start time, end time and time step with start, end and step.

time-select/basic

:::

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

:::

:::demo

time-select/time-formats

:::

Fixed time range

If start( end ) time is picked at first, then the status of end( start ) time's options will change accordingly.

:::demo

time-select/time-range

:::

Attributes

Attribute	Description	Type	Accepted Values	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	string	large / default / small	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	string	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	—	00:00
max-time	maximum time, any time after this time will be disabled	string	—	—
format	set format of time	string	see formats	HH:mm

Events

Event Name	Description	Parameters
change	triggers when user confirms the value	component's binding value
blur	triggers when Input blurs	component instance
focus	triggers when Input focuses	component instance

Methods

Method	Description	Parameters
focus	focus the Input component	—
blur	blur the Input component	—