ElementUI TimePicker固定時間範圍,開始時間小於結束時間

一、概述

根據項目需求:

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 表示可以選擇的最小時間,小於開始時間。

 

效果如下:

 

 

 可以發現,結束時間08:00是灰色,不可選。

 

本文參考鏈接:

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章