2021-10-22 19:32:39 +08:00
|
|
|
---
|
2021-10-25 15:21:08 +08:00
|
|
|
title: TimeSelect
|
2021-10-22 19:32:39 +08:00
|
|
|
lang: en-US
|
|
|
|
|
---
|
|
|
|
|
|
2021-09-17 00:18:50 +08:00
|
|
|
# TimeSelect
|
2020-10-04 19:57:49 +08:00
|
|
|
|
|
|
|
|
Use Time Select for time input.
|
|
|
|
|
|
2022-01-12 11:11:43 +08:00
|
|
|
The available time range is 00:00 to 23:59
|
|
|
|
|
|
2021-09-17 00:18:50 +08:00
|
|
|
## Fixed time picker
|
2020-10-04 19:57:49 +08:00
|
|
|
|
|
|
|
|
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`.
|
2021-09-04 19:29:28 +08:00
|
|
|
|
2021-09-17 00:18:50 +08:00
|
|
|
time-select/basic
|
2021-09-04 19:29:28 +08:00
|
|
|
|
2020-10-04 19:57:49 +08:00
|
|
|
:::
|
|
|
|
|
|
2022-01-12 11:11:43 +08:00
|
|
|
## Time Formats
|
|
|
|
|
|
|
|
|
|
Use `format` to control format of time(hours and minutes).
|
|
|
|
|
|
|
|
|
|
Check the list [here](https://day.js.org/docs/en/display/format#list-of-all-available-formats) of all available formats of Day.js.
|
|
|
|
|
|
|
|
|
|
:::warning
|
|
|
|
|
|
|
|
|
|
Pay attention to capitalization
|
|
|
|
|
|
|
|
|
|
:::
|
|
|
|
|
|
|
|
|
|
:::demo
|
|
|
|
|
|
|
|
|
|
time-select/time-formats
|
|
|
|
|
|
|
|
|
|
:::
|
|
|
|
|
|
2021-09-17 00:18:50 +08:00
|
|
|
## Fixed time range
|
2020-10-04 19:57:49 +08:00
|
|
|
|
2022-01-12 11:11:43 +08:00
|
|
|
If start( end ) time is picked at first, then the status of end( start ) time's options will change accordingly.
|
2020-10-04 19:57:49 +08:00
|
|
|
|
|
|
|
|
:::demo
|
2021-09-04 19:29:28 +08:00
|
|
|
|
2021-09-17 00:18:50 +08:00
|
|
|
time-select/time-range
|
2021-09-04 19:29:28 +08:00
|
|
|
|
2020-10-04 19:57:49 +08:00
|
|
|
:::
|
|
|
|
|
|
2021-09-17 00:18:50 +08:00
|
|
|
## Attributes
|
2020-10-04 19:57:49 +08:00
|
|
|
|
2022-09-10 09:14:31 +08:00
|
|
|
| Name | Description | Type | Accepted Values | Default |
|
2022-08-29 11:23:35 +08:00
|
|
|
| --------------------- | -------------------------------------------------------- | --------------------- | -------------------------------------------------------------------------------------- | ----------- |
|
|
|
|
|
| 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](https://day.js.org/docs/en/display/format#list-of-all-available-formats) | HH:mm |
|
2020-12-16 22:09:48 +08:00
|
|
|
|
2021-09-17 00:18:50 +08:00
|
|
|
## Events
|
2021-09-04 19:29:28 +08:00
|
|
|
|
2022-09-10 09:14:31 +08:00
|
|
|
| Name | Description | Parameters |
|
|
|
|
|
| ------ | ------------------------------------- | ------------------------- |
|
|
|
|
|
| change | triggers when user confirms the value | component's binding value |
|
|
|
|
|
| blur | triggers when Input blurs | (event: FocusEvent) |
|
|
|
|
|
| focus | triggers when Input focuses | (event: FocusEvent) |
|
2020-10-04 19:57:49 +08:00
|
|
|
|
2021-09-17 00:18:50 +08:00
|
|
|
## Methods
|
2021-09-04 19:29:28 +08:00
|
|
|
|
|
|
|
|
| Method | Description | Parameters |
|
|
|
|
|
| ------ | ------------------------- | ---------- |
|
|
|
|
|
| focus | focus the Input component | — |
|
|
|
|
|
| blur | blur the Input component | — |
|
