1. TimePicker时间选择器
1.1. 用于选择或输入日期。
1.2. 时间选择器属性
参数 | 说明 | 类型 | 可选值 | 默认值 |
value / v-model | 绑定值 | date(TimePicker) / string(TimeSelect) | 无 | 无 |
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 |
align | 对齐方式 | string | left / center / right | left |
popper-class | TimePicker下拉框的类名 | string | 无 | 无 |
picker-options | 当前时间日期选择器特有的选项参考下表 | object | 无 | {} |
range-separator | 选择范围时的分隔符 | string | 无 | '-' |
value-format | 可选, 仅TimePicker时可用, 绑定值的格式。不指定则绑定值为Date对象 | string | 见日期格式 | 无 |
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 |
1.3. Time Select Options
参数 | 说明 | 类型 | 可选值 | 默认值 |
start | 开始时间 | string | 无 | 09:00 |
end | 结束时间 | string | 无 | 18:00 |
step | 间隔时间 | string | 无 | 00:30 |
minTime | 最小时间, 小于该时间的时间段将被禁用 | string | 无 | 00:00 |
maxTime | 最大时间, 大于该时间的时间段将被禁用 | string | 无 | 无 |
1.4. 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 | 'HH:mm:ss' |
1.5. 时间选择器事件
事件名称 | 说明 | 参数 |
change | 用户确认选定的值时触发 | 组件绑定值 |
blur | 当input失去焦点时触发 | 组件实例 |
focus | 当input获得焦点时触发 | 组件实例 |
1.6. 时间选择器方法
方法名 | 说明 |
focus | 使input获取焦点 |
2. 时间选择器例子
2.1. 使用脚手架新建一个名为element-ui-timepicker的前端项目, 同时安装Element插件。
2.2. 编写App.vue
<template>
<div id="app">
<h1>固定时间点-提供几个固定的时间点供用户选择</h1>
<h4>使用el-time-select标签, 分别通过start、end和step指定可选的起始时间、结束时间和步长。</h4>
<el-time-select v-model="val1" :picker-options="{ start: '08:30', step: '00:15', end: '18:30' }" placeholder="选择时间"></el-time-select>
<h1>任意时间点</h1>
<h4>使用el-time-picker标签, 通过selectableRange限制可选时间范围。提供了两种交互方式: 默认情况下通过鼠标滚轮进行选择, 打开arrow-control属性则通过界面上的箭头进行选择。</h4>
<el-time-picker v-model="val21" :picker-options="{ selectableRange: '18:30:00 - 20:30:00' }" placeholder="任意时间点"></el-time-picker>
<div style="display: inline-block; margin-left: 20px;"></div>
<el-time-picker arrow-control v-model="val22" :picker-options="{ selectableRange: '18:30:00 - 20:30:00' }" placeholder="任意时间点"></el-time-picker>
<h1>固定时间范围</h1>
<h4>若先选择开始时间, 则结束时间内备选项的状态会随之改变。</h4>
<el-time-select placeholder="起始时间" v-model="startTime" :picker-options="{ start: '08:30', step: '00:15', end: '18:30' }"></el-time-select>
<div style="display: inline-block; margin-left: 20px;"></div>
<el-time-select placeholder="结束时间" v-model="endTime" :picker-options="{ start: '08:30', step: '00:15', end: '18:30', minTime: startTime }"></el-time-select>
<h1>任意时间范围-可选择任意的时间范围</h1>
<h4>添加is-range属性即可选择时间范围, 同样支持arrow-control属性。</h4>
<el-time-picker is-range v-model="val41" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围"></el-time-picker>
<div style="display: inline-block; margin-left: 20px;"></div>
<el-time-picker is-range arrow-control v-model="val42" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围"></el-time-picker>
</div>
</template>
<script>
export default {
data () {
return {
val1: '',
val21: new Date(2016, 9, 10, 18, 40),
val22: new Date(2016, 9, 10, 18, 40),
startTime: '',
endTime: '',
val41: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
val42: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]
}
}
}
</script>
2.3. 运行项目