1. 概述
通过Element提供的时间选择器进行时间输入，是非常简单高效的，本篇来介绍下时间选择器常见用法。
2. 选择任意时间
使用el-time-picker标签即可创建任意时间选择器，选中的值会绑定value。
选择任意时间：
<el-time-picker v-model="value" placeholder="选择时间">
</el-time-picker>
3. 默认时间设置
如果想给时间选择器提供一个默认的显示时间，可以直接为绑定变量赋予一个Date对象。
默认时间设置：{{defaultValue}}
<el-time-picker v-model="defaultValue" placeholder="选择时间">
</el-time-picker>
data() {
return {
defaultValue: new Date(2021, 1, 2, 8, 10, 30),
}
},
所以该时间选择器默认会显示8:10:30。
4. 时间格式设置
默认的时间格式很难看，如下图：
可以通过value-format属性指定时间格式：
时间格式设置：{{value}}
<el-time-picker v-model="value" placeholder="选择时间" value-format="HH:mm:ss">
</el-time-picker>
此时选择时间后，选中值如下：
5. 指定可选时间段
可以通过参数设定选择时间所属的时间段：
选择时间段内时间：
<el-time-picker v-model="value" :picker-options="{selectableRange: '18:00:00 - 23:30:00'}" placeholder="选择时间">
</el-time-picker>
上面代码规定，只能选择18:00:00 - 23:30:00之内的时间。如下图，不再时间段内的时间点是禁止选择的：
6. 选择时间点
有时候，我们不想让用户选择任意的时间，而是规定必须选择我们指定的时间点，例如每个整点。则可以如下设置：
时间点选择：{{value}}
<el-time-select v-model="value" :picker-options="{start: '08:00',step: '00:30',end: '12:00'}" placeholder="选择时间">
</el-time-select>
注意标签变为el-time-select而不是el-time-picker，select表示选择的意思，后面设定了选择的起止时间和变化步幅。
效果如下：
7. 时间选择变化事件
当选择时间发生变化，可以通过@change绑定对应函数。
时间选择变化:
<el-time-picker v-model="value" placeholder="选择时间" @change="timeChange">
</el-time-picker>
