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

发布时间：2021-07-13 09:45:30编辑：admin阅读（4574）

    一、概述

    根据项目需求：

    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 表示可以选择的最小时间，小于开始时间。

     

    效果如下：

     1.png

     

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

     

    本文参考链接：

    https://element.eleme.cn/#/zh-CN/component/time-picker


关键字：

上一篇： ElementUI DateTimePicker设置当前日期之前的时间禁止选择

下一篇： ElementUI el-checkbox实现全选反选单选