1.月份选择器控制范围，只能选择当前月份前的月份，且范围只能是6个月
参考资料：https://blog.csdn.net/weixin_34000916/article/details/88661604
<template>
<div class="UsageStatistics">
<div class="searchingDiv">
<el-form :inline="true" size="mini">
<el-form-item label="所有用户使用量统计区间">
<el-date-picker v-model="value2" type="monthrange" align="right" unlink-panels range-separator="至"
start-placeholder="开始月份" end-placeholder="结束月份" :picker-options="pickerOptions">
</el-date-picker>
</el-form-item>
<!-- <el-form-item label="检查日期" class="dateFormWrap">
<el-date-picker v-model="value2" type="daterange" :editable="false" clearable>
</el-date-picker>
</el-form-item> -->
</el-form>
</div>
</div>
</template>
<script>
export default {
name: "UsageStatistics",
data() {
return {
value2: '',
pickerMinDate: "",
pickerMinYear: "",
pickerMinMonth: "",
pickerOptions: {
onPick: ({
maxDate,
minDate
}) => {
if (maxDate) {
this.pickerMinDate = null
this.pickerMinYear = null
this.pickerMinMonth = null
} else {
this.pickerMinYear = minDate.getFullYear()
this.pickerMinMonth = minDate.getMonth() + 1
this.pickerMinDate = minDate.getTime()
}
},
disabledDate: (time) => {
if (this.pickerMinDate) {
// let day90 = 89 * 24 * 3600 * 1000;
// let maxTime = this.pickerMinDate + day90;
// if (maxTime > new Date()) {
// maxTime = new Date();
// }
// return (
// time.getTime() > maxTime ||
// time.getTime() < this.pickerMinDate - day90
// );
}
// console.log("maxDate:", maxDate)
if (this.pickerMinMonth) {
let maxMonth, maxYear, minMonth, minYear
if ((this.pickerMinMonth + 5) > 12) {
maxMonth = (this.pickerMinMonth + 5) - 12
maxYear = this.pickerMinYear + 1 + "-" + maxMonth
} else {
maxMonth = this.pickerMinMonth + 5
maxYear = this.pickerMinYear + "-" + maxMonth
}
if ((this.pickerMinMonth - 5) < 1) {
minMonth = (this.pickerMinMonth - 5) + 12
minYear = this.pickerMinYear - 1 + "-" + minMonth
} else {
minMonth = this.pickerMinMonth - 5
minYear = this.pickerMinYear + "-" + minMonth
}
let currentY = new Date().getFullYear() + '-' + (new Date().getMonth() + 1)
let currentTime = new Date(currentY + "-01").getTime()
let maxTime = new Date(maxYear + "-01").getTime()
if (maxTime > currentTime) {
maxTime = currentTime
}
let minTime = new Date(minYear + "-01").getTime()
return (
time.getTime() > maxTime ||
time.getTime() < minTime
);
}
return time.getTime() > Date.now() - 8.64e6; //最大只能选择当前月份
},
shortcuts: [{
text: '本月',
onClick(picker) {
picker.$emit('pick', [new Date(), new Date()]);
}
}, {
text: '今年至今',
onClick(picker) {
const end = new Date();
const start = new Date(new Date().getFullYear(), 0);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近六个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setMonth(start.getMonth() - 6);
picker.$emit('pick', [start, end]);
}
}]
},
}
},
mounted() {
this.init()
},
methods: {
init() {
// console.log(this.$route)
}
}
}
</script>
<style>
</style>
