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

5.2 KiB

title, lang
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 —