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