element/examples/docs/zh-CN/time-picker.md

187 lines
4.4 KiB
Markdown
Raw Normal View History

2016-07-27 14:15:02 +08:00
<style>
.demo-box {
.el-date-editor + .el-date-editor {
margin-left: 10px;
}
}
</style>
## TimePicker 时间选择器
2016-09-10 10:01:48 +08:00
2016-08-27 21:24:16 +08:00
用于选择或输入日期
2016-07-27 14:15:02 +08:00
2016-08-27 21:24:16 +08:00
### 固定时间点
提供几个固定的时间点供用户选择
:::demo 使用 el-time-select 标签,分别通过`star`、`end`和`step`指定可选的起始时间、结束时间和步长
2016-07-27 14:15:02 +08:00
```html
<el-time-select
2016-08-27 21:24:16 +08:00
v-model="value1"
2016-07-27 14:15:02 +08:00
:picker-options="{
start: '08:30',
step: '00:15',
end: '18:30'
}"
placeholder="选择时间">
</el-time-select>
<script>
export default {
data() {
return {
value1: ''
};
}
}
</script>
2016-07-27 14:15:02 +08:00
```
2016-08-27 21:24:16 +08:00
:::
2016-07-27 14:15:02 +08:00
2016-08-27 21:24:16 +08:00
### 任意时间点
2016-07-27 14:15:02 +08:00
2016-08-27 21:24:16 +08:00
可以选择任意时间
2016-07-27 14:15:02 +08:00
2016-08-27 21:24:16 +08:00
:::demo 使用 el-time-picker 标签,通过`selectableRange`限制可选时间范围
2016-07-27 14:15:02 +08:00
```html
<template>
<el-time-picker
v-model="value2"
: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)
};
}
}
</script>
2016-07-27 14:15:02 +08:00
```
2016-08-27 21:24:16 +08:00
:::
2016-07-27 14:15:02 +08:00
2016-08-27 21:24:16 +08:00
### 固定时间范围
2016-07-27 14:15:02 +08:00
2016-08-27 21:24:16 +08:00
若先选择开始时间,则结束时间内备选项的状态会随之改变
2016-07-27 14:15:02 +08:00
2016-08-27 21:24:16 +08:00
:::demo
2016-07-27 14:15:02 +08:00
```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>
2016-07-27 14:15:02 +08:00
```
2016-08-27 21:24:16 +08:00
:::
2016-07-27 14:15:02 +08:00
2016-08-27 21:24:16 +08:00
### 任意时间范围
2016-07-27 14:15:02 +08:00
2016-08-27 21:24:16 +08:00
可选择任意的时间范围
2016-07-27 14:15:02 +08:00
2016-08-27 21:24:16 +08:00
:::demo 添加`is-range`属性即可选择时间范围
2016-07-27 14:15:02 +08:00
```html
<template>
<el-time-picker
is-range
v-model="value3"
placeholder="选择时间范围">
</el-time-picker>
</template>
<script>
export default {
data() {
return {
value3: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]
};
}
}
</script>
2016-07-27 14:15:02 +08:00
```
2016-08-27 21:24:16 +08:00
:::
2016-07-27 14:15:02 +08:00
<script>
export default {
data() {
return {
2016-12-09 18:12:56 +08:00
value1: '',
2016-09-10 10:01:48 +08:00
value2: new Date(2016, 9, 10, 18, 40),
value3: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
2016-07-27 14:15:02 +08:00
startTime: '',
2016-08-27 21:24:16 +08:00
endTime: ''
2016-07-27 14:15:02 +08:00
};
}
}
</script>
2016-08-27 21:24:16 +08:00
### Attributes
2016-07-27 14:15:02 +08:00
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| readonly | 完全只读 | boolean | — | false |
2016-12-29 20:53:33 +08:00
| disabled | 禁用 | boolean | — | false |
| editable | 文本框可输入 | boolean | — | true |
| clearable | 是否显示清除按钮 | boolean | — | true |
| size | 输入框尺寸 | string | large, small, mini | — |
2016-09-02 13:56:47 +08:00
| placeholder | 占位内容 | string | — | — |
2016-10-17 16:32:20 +08:00
| format | 时间格式化(TimePicker) | string | 小时:`HH`,分:`mm`,秒:`ss` | 'HH:mm:ss' |
2016-12-29 20:53:33 +08:00
| value | 绑定值 | TimePicker: DateTimeSelect: String | — | — |
| align | 对齐方式 | string | left, center, right | left |
| popper-class | TimePicker 下拉框的类名 | string | — | — |
2016-12-13 22:52:29 +08:00
| picker-options | 当前时间日期选择器特有的选项参考下表 | object | — | {} |
2016-07-27 14:15:02 +08:00
2016-08-27 21:24:16 +08:00
### Time Select Options
2016-07-27 14:15:02 +08:00
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
2016-09-02 13:56:47 +08:00
| start | 开始时间 | string | — | 09:00 |
| end | 结束时间 | string | — | 18:00 |
| step | 间隔时间 | string | — | 00:30 |
| minTime | 最小时间,小于该时间的时间段将被禁用 | string | — | 00:00 |
2016-12-29 20:53:33 +08:00
| maxTime | 最大时间,大于该时间的时间段将被禁用 | string | — | — |
2016-07-27 14:15:02 +08:00
2016-08-27 21:24:16 +08:00
### Time Picker Options
2016-07-27 14:15:02 +08:00
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
2016-12-13 22:52:29 +08:00
| selectableRange | 可选时间段,例如`'18:30:00 - 20:30:00'`或者传入数组`['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']` | string/array | — | — |
2016-07-27 14:15:02 +08:00
### Events
| Event Name | Description | Parameters |
|---------|--------|---------|
2016-12-26 11:44:22 +08:00
| change | 当 input 的值改变时触发,返回值和文本框一致 | formatted value |