Element el-time-picker el-time-select 时间选择器详解

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="选择时间">

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">

此时选择时间后，选中值如下：

5. 指定可选时间段

可以通过参数设定选择时间所属的时间段：

选择时间段内时间：

   <el-time-picker v-model="value" :picker-options="{selectableRange: '18:00:00 - 23:30:00'}" placeholder="选择时间">

上面代码规定，只能选择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">