基于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>
效果图如下: