基于Element UI的日期选择器时间选择范围限制以及筛选出指定时间段的日期

需求背景:有一个带时间的组合查询条件,要求起始日期和结束日期只能按周选择(本案例按周五选择)且起始日期不能大于结束日期

解决思路:先判断和筛选出满足是周五的日期,然后将起始时间与结束时间进行比较,最终将满足条件的值返回

代码实现如下:

<template>
 <div>
  <div class="block">
   <span class="demonstration">开始日期:</span>
   <el-date-picker
           v-model="value1"
           type="date"
           placeholder="选择日期"
           :picker-options="pickerOptionsStart">
   </el-date-picker>
   <span class="demonstration">结束日期:</span>
   <el-date-picker
           v-model="value2"
           type="date"
           placeholder="结束日期"
           :picker-options="pickerOptionsEnd">
   </el-date-picker>
  </div>

 </div>
</template>

<script>
    export default {
        data() {
            return {
                value1: '',
                value2: '',
                pickerOptionsStart: this.limitDateStart(),
                pickerOptionsEnd: this.limitDateEnd(),
            }
        },
        methods: {
            limitDateStart: function () {
                let _this = this
                return {
                disabledDate(time) {
                    let five = time.getDay()
                    let newFive = 0
                    if(five == 5){
                        newFive = time.getTime()
                    }
                    // return time.getTime() > Date.now() - 8.64e7; //选择时不包含当前日期
                    if (_this.value2 != "") {
                        return time.getTime() != newFive || time.getTime() > Date.now() - 8.64e6 || time.getTime() > _this.value2;
                    } else {
                        return time.getTime() != newFive || time.getTime() > Date.now() - 8.64e6
                    }
                  }
                }
            },
            limitDateEnd: function () {
                let _this = this
                return {
                    disabledDate(time) {
                        let five = time.getDay()
                        let newFive = 0
                        if(five == 5){
                            newFive = time.getTime()
                        }
                        // return time.getTime() > Date.now() - 8.64e7;//选择时不包含当前日期
                        return time.getTime() != newFive || time.getTime() > Date.now() - 8.64e6 || time.getTime() < _this.value1;

                    }
                }
            }
        }
    }
</script>

效果图如下:

基于Element UI的日期选择器时间选择范围限制以及筛选出指定时间段的日期