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

:::tip

This component requires the <client-only></client-only> wrap when used in SSR (eg: Nuxt) and SSG (eg: VitePress).

:::

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

:::

API

Attributes

Name	Description	Type	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	^[enum]'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] / ^[enum]'dark' | 'light'	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]	—
max-time	maximum time, any time after this time will be disabled	^[string]	—
format	set format of time	^[string] see formats	HH:mm

Events

Name	Description	Type
change	triggers when user confirms the value	^[Function](value: string) => void
blur	triggers when Input blurs	^[Function](event: FocusEvent) => void
focus	triggers when Input focuses	^[Function](event: FocusEvent) => void

Exposes

Method	Description	Type
focus	focus the Input component	^[Function]() => void
blur	blur the Input component	^[Function]() => void