mirror of https://github.com/ElemeFE/element
224 lines
6.6 KiB
Markdown
224 lines
6.6 KiB
Markdown
<style>
|
||
.demo-box {
|
||
.el-date-editor + .el-date-editor {
|
||
margin-left: 10px;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
## TimePicker 时间选择器
|
||
|
||
用于选择或输入日期
|
||
|
||
### 固定时间点
|
||
|
||
提供几个固定的时间点供用户选择
|
||
|
||
:::demo 使用 el-time-select 标签，分别通过`star`、`end`和`step`指定可选的起始时间、结束时间和步长
|
||
```html
|
||
<el-time-select
|
||
v-model="value1"
|
||
:picker-options="{
|
||
start: '08:30',
|
||
step: '00:15',
|
||
end: '18:30'
|
||
}"
|
||
placeholder="选择时间">
|
||
</el-time-select>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
value1: ''
|
||
};
|
||
}
|
||
}
|
||
</script>
|
||
```
|
||
:::
|
||
|
||
### 任意时间点
|
||
|
||
可以选择任意时间
|
||
|
||
:::demo 使用 el-time-picker 标签，通过`selectableRange`限制可选时间范围。提供了两种交互方式：默认情况下通过鼠标滚轮进行选择，打开`arrow-control`属性则通过界面上的箭头进行选择。
|
||
```html
|
||
<template>
|
||
<el-time-picker
|
||
v-model="value2"
|
||
:picker-options="{
|
||
selectableRange: '18:30:00 - 20:30:00'
|
||
}"
|
||
placeholder="任意时间点">
|
||
</el-time-picker>
|
||
<el-time-picker
|
||
arrow-control
|
||
v-model="value3"
|
||
:picker-options="{
|
||
selectableRange: '18:30:00 - 20:30:00'
|
||
}"
|
||
placeholder="任意时间点">
|
||
</el-time-picker>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
value2: new Date(2016, 9, 10, 18, 40),
|
||
value3: new Date(2016, 9, 10, 18, 40)
|
||
};
|
||
}
|
||
}
|
||
</script>
|
||
```
|
||
:::
|
||
|
||
### 固定时间范围
|
||
|
||
若先选择开始时间，则结束时间内备选项的状态会随之改变
|
||
|
||
:::demo
|
||
```html
|
||
<template>
|
||
<el-time-select
|
||
placeholder="起始时间"
|
||
v-model="startTime"
|
||
:picker-options="{
|
||
start: '08:30',
|
||
step: '00:15',
|
||
end: '18:30'
|
||
}">
|
||
</el-time-select>
|
||
<el-time-select
|
||
placeholder="结束时间"
|
||
v-model="endTime"
|
||
:picker-options="{
|
||
start: '08:30',
|
||
step: '00:15',
|
||
end: '18:30',
|
||
minTime: startTime
|
||
}">
|
||
</el-time-select>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
startTime: '',
|
||
endTime: ''
|
||
};
|
||
}
|
||
}
|
||
</script>
|
||
```
|
||
:::
|
||
|
||
### 任意时间范围
|
||
|
||
可选择任意的时间范围
|
||
|
||
:::demo 添加`is-range`属性即可选择时间范围，同样支持`arrow-control`属性。
|
||
```html
|
||
<template>
|
||
<el-time-picker
|
||
is-range
|
||
v-model="value4"
|
||
range-separator="至"
|
||
start-placeholder="开始时间"
|
||
end-placeholder="结束时间"
|
||
placeholder="选择时间范围">
|
||
</el-time-picker>
|
||
<el-time-picker
|
||
is-range
|
||
arrow-control
|
||
v-model="value5"
|
||
range-separator="至"
|
||
start-placeholder="开始时间"
|
||
end-placeholder="结束时间"
|
||
placeholder="选择时间范围">
|
||
</el-time-picker>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
value4: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
|
||
value5: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]
|
||
};
|
||
}
|
||
}
|
||
</script>
|
||
```
|
||
:::
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
value1: '',
|
||
value2: new Date(2016, 9, 10, 18, 40),
|
||
value3: new Date(2016, 9, 10, 18, 40),
|
||
value4: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
|
||
value5: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
|
||
startTime: '',
|
||
endTime: ''
|
||
};
|
||
}
|
||
}
|
||
</script>
|
||
|
||
### Attributes
|
||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||
| readonly | 完全只读 | boolean | — | false |
|
||
| disabled | 禁用 | boolean | — | false |
|
||
| editable | 文本框可输入 | boolean | — | true |
|
||
| clearable | 是否显示清除按钮 | boolean | — | true |
|
||
| size | 输入框尺寸 | string | medium / small / mini | — |
|
||
| placeholder | 非范围选择时的占位内容 | string | — | — |
|
||
| start-placeholder | 范围选择时开始日期的占位内容 | string | — | — |
|
||
| end-placeholder | 范围选择时开始日期的占位内容 | string | — | — |
|
||
| is-range | 是否为时间范围选择，仅对`<el-time-picker>`有效 | boolean | — | false |
|
||
| arrow-control | 是否使用箭头进行时间选择，仅对`<el-time-picker>`有效 | boolean | — | false |
|
||
| value | 绑定值 | date(TimePicker) / string(TimeSelect) | — | — |
|
||
| align | 对齐方式 | string | left / center / right | left |
|
||
| popper-class | TimePicker 下拉框的类名 | string | — | — |
|
||
| picker-options | 当前时间日期选择器特有的选项参考下表 | object | — | {} |
|
||
| range-separator | 选择范围时的分隔符 | string | - | '-' |
|
||
| value-format | 可选，仅TimePicker时可用，绑定值的格式，同DatePicker | string | 小时 `HH`，分 `mm`，秒 `ss`，AM/PM `A` | — |
|
||
| default-value | 可选，选择器打开时默认显示的时间 | Date(TimePicker) / string(TimeSelect) | 可被`new Date()`解析(TimePicker) / 可选值(TimeSelect) | — |
|
||
| name | 原生属性 | string | — | — |
|
||
| prefix-icon | 自定义头部图标的类名 | string | — | el-icon-time |
|
||
| clear-icon | 自定义清空图标的类名 | string | — | el-icon-circle-close |
|
||
|
||
### Time Select Options
|
||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||
| start | 开始时间 | string | — | 09:00 |
|
||
| end | 结束时间 | string | — | 18:00 |
|
||
| step | 间隔时间 | string | — | 00:30 |
|
||
| minTime | 最小时间，小于该时间的时间段将被禁用 | string | — | 00:00 |
|
||
| maxTime | 最大时间，大于该时间的时间段将被禁用 | string | — | — |
|
||
|
||
### Time Picker Options
|
||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||
| selectableRange | 可选时间段，例如`'18:30:00 - 20:30:00'`或者传入数组`['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']` | string / array | — | — |
|
||
| format | 时间格式化(TimePicker) | string | 小时：`HH`，分：`mm`，秒：`ss`，AM/PM `A` | 'HH:mm:ss' |
|
||
|
||
### Events
|
||
| 事件名 | 说明 | 参数 |
|
||
|---------|--------|---------|
|
||
| change | 用户确认选定的值时触发 | 组件绑定值 |
|
||
| blur | 当 input 失去焦点时触发 | 组件实例 |
|
||
| focus | 当 input 获得焦点时触发 | 组件实例 |
|
||
|
||
### Methods
|
||
| 方法名 | 说明 | 参数 |
|
||
| ---- | ---- | ---- |
|
||
| focus | 使 input 获取焦点 | - |
|