element-plus/docs/en-US/component/time-picker.md
jeremywu db976bba68
chore(docs): adding lang field for markdowns (#4005)
- Add lang field for all *.md files' frontmatters
2021-10-22 19:32:39 +08:00

6.8 KiB

lang
en-US

TimePicker

Use Time Picker for time input.

Arbitrary time picker

Can pick an arbitrary time.

:::demo Use el-time-picker label, and you can limit the time range by specifying disabledHours disabledMinutes and disabledSeconds. 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

:::

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

:::

Attributes

Attribute Description Type Accepted Values Default
model-value / v-model binding value Date
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 string medium / small / mini
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
align alignment left / center / right left
popper-class custom class name for TimePicker's dropdown string
range-separator range separator string '-'
format format of the displayed value in the input box string see date formats HH:mm:ss
default-value optional, default date of the calendar Date for TimePicker, string for TimeSelect anything accepted by new Date() for TimePicker, selectable value for TimeSelect
name same as name in native input string
prefix-icon Custom prefix icon class string el-icon-time
clear-icon Custom clear icon class string el-icon-circle-close
disabled-hours To specify the array of hours that cannot be selected function
disabled-minutes To specify the array of minutes that cannot be selected function(selectedHour)
disabled-seconds To specify the array of seconds that cannot be selected function(selectedHour, selectedMinute)

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