ElementUI TimePicker固定时间范围，开始时间小于结束时间

╰+攻爆jí腚メ 2022-10-07 12:47 467阅读 0赞

# 一、概述 #

根据项目需求：

1. 开始时间必须小于结束时间，不能等于结束时间。

2. 结束时间必须小于开始时间，不能相等。

2. 开始时间和结束时间，最小间隔30分钟。

3. 时间范围从00:00~24:00

4. 默认范围08:00~18:00

# 二、代码实现 #

test.vue

<template>
      <div>
        <el-form ref="params" :model="params" label-width="80px">
          <div>开放时间</div>
          <div>
            <el-time-select
              style="width:130px;"
              :clearable="false"
              placeholder="起始时间"
              v-model="params.startTime"
              :picker-options="{
                  start: '00:00',
                  step: '00:30',
                  end:params.endTime?params.endTime:'23:59',
                  maxTime: params.endTime
              }">
            </el-time-select>
            <el-time-select
              style="width:130px;"
              placeholder="结束时间"
              :clearable="false"
              v-model="params.endTime"
              :picker-options="{
                  start: params.startTime?params.startTime:'00:00',
                  step: '00:30',
                  end:'24:00',
                  minTime: params.startTime
                }">
            </el-time-select>
          </div>
        </el-form>
      </div>
    </template>
    <script>
      export default {
        data() {
          return {
            params:{
              startTime: '08:00',//访客通行开始时间
              endTime: '18:00',//访客通行结束时间
            }
          }
        },
      }
    </script>
    <style scoped>
    
    </style>

注意：

step: '00:30'  表示间隔半小时

minTime: params.startTime 表示可以选择的最小时间，小于开始时间。

效果如下：

![3ea5baa0f29681626bacdd240c1974bf.png][]

可以发现，结束时间08:00是灰色，不可选。

本文参考链接：

[https://element.eleme.cn/\#/zh-CN/component/time-picker][https_element.eleme.cn_zh-CN_component_time-picker]

[3ea5baa0f29681626bacdd240c1974bf.png]: /images/20221005/9a4ae0fe58ef4b4994d8e12ed9838481.png
[https_element.eleme.cn_zh-CN_component_time-picker]: https://element.eleme.cn/#/zh-CN/component/time-picker