element-plus/docs/en-US/component/time-select.md
云游君 4560adfdf8
refactor(style): adjust component size to large/default/small (#4491)
* refactor(style): adjust component size to large/default/small

* refactor(components): avatar size & use flex instead of block

* refactor(components): adjust check button size

* refactor(components): adjust tag size

* refactor(components): adjust size doc

* fix(components): datetime-picker demo style width

* refactor(components): color-picker size & block to flex

* refactor(components): adjust slider input size

* refactor(components): adjust radio input size for demo

* refactor(components): adjust select size & docs

* refactor(components): adjust form radio size & docs

* refactor(components): add windicss for docs

* refactor(components): adjust skeleton avatar size to css var

* refactor(components): simplify typography size demo

* refactor(components): adjust dropdown size & demo

* refactor(components): adjust descriptions size

* fix(components): datetime-picker showcase class pollute global button

* chore(ci): upgrade docs dependencies to fix ci

* fix(ci): add highlight because vitepress not export it

* fix(ci): disable line for no-console

* fix(ci): remove mini to fix test

* fix(style): code font size

* fix(style): button span flex style

* fix(style): button padding horizontal default 15px

* refactor(components): adjust tag padding size & demo

* refactor(components): adjust form line-height for input

* refactor(components): adjust dropdown menu size & button padding

* fix(style): picker separator block to flex center

* fix: dropdown button span items-center

* style: adjust input-with-icon & size demo & fix input vitepress load

* chore: upgrade dependencies

* chore: upgrade dependencies

* ci: fix website build

* ci: regenerate pnpm-lock.yaml

* ci: use dev pnpm-lock

* ci: update pnpm-lock.yaml
2021-12-12 17:54:21 +08:00

3.4 KiB

title lang
TimeSelect en-US

TimeSelect

Use Time Select for time input.

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

:::

Fixed time range

If start time is picked at first, then the end time 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
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

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