<div class="selectItem" v-show="monthShow">
<el-date-picker
v-model="trendData.date"
:clearable="false"
type="monthrange"
:default-value="trendData.date"
:picker-options="monthpickoption"
value-format="yyyy-MM"
range-separator="至"
@change="onChangeDate"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</div>
return {
trendData: {
date: []
},
minDate: null,
maxDate: null
},
monthpickoption:{
disabledDate: (time) => {
if (this.minDate !== null && this.maxDate === null) {
let minMonth = this.minDate.getMonth(),
lastYear = new Date(this.minDate).setMonth(minMonth - 11),
nextYear = new Date(this.minDate).setMonth(minMonth + 11);
let minTime = this.minDate.getTime()
let nextTime = new Date().setMonth(new Date().getMonth() + 11)
let lastTime = new Date().setMonth(new Date().getMonth() - 11)
if (minTime <= nextTime || minTime >= lastTime){
//开始日期少于当前月+12个月 并且大于当前月-12个月,则表示只限制前面的范围
return time.valueOf() > new Date().getTime() || time.valueOf() > nextYear.valueOf() || time.valueOf() < lastYear.valueOf()
}
else {
// 只能选 minDate 前后一年的范围
return time.valueOf() < lastYear.valueOf() || time.valueOf() > nextYear.valueOf();
}
}else {
let startMonth = this.trendData.date[0]
let month = new Date(startMonth).getMonth()
let lastMonth = new Date(startMonth).setMonth(month - 11)
//如果有默认值,只禁用开始日期,因为已经限定了禁用未来范围,且默认值已经为12个月范围
return this.monthPick(time) || time < lastMonth.valueOf();
}
},
onPick: ({minDate, maxDate}) => {
this.minDate = minDate;
this.maxDate = maxDate;
}
}
monthPick(time){
// 获取当前的月份信息
const date = new Date() // 获取当前的时间基本信息,值是这样的: Tue Jul 20 2021 14:59:43 GMT+0800 (中国标准时间)
const year = date.getFullYear() // 获取当前年份,值是这样的: 2021
let month = date.getMonth() + 1 // 获取当前月份,值是这样的: 6 getMonth()方法返回值是0-11,也就是1月份到12月份,所以要加上1,才是当前月份
if (month >= 1 && month <= 9) {
// 如果是1月到9月就要在前面补上一个0 比如:02、07 月份这样表示
month = '0' + month
}
const nowDate = year.toString() + month.toString() // 转换成字符串拼接,最终得到年和月,比如此时的时间是2021年7月20号,所以nowDate的值是:202107
// 获取时间选择器的月份信息
const timeyear = time.getFullYear() // 获取时间选择器的年份(有很多)
let timemonth = time.getMonth() + 1 // 与上面同理
if (timemonth >= 1 && timemonth <= 9) {
timemonth = '0' + timemonth
}
const elTimeData = timeyear.toString() + timemonth.toString()
// 返回,时间选择器的日期月份大于当前日期的月份,又因为disabledDate函数是控制月份禁用不可选
// 所以,最终就是:时间选择器的月份大于当前的月份,就都禁用掉,所以就实现了最终效果:
// 大于等于当前月份都不可选
return elTimeData > nowDate // 这里虽然是字符串,但是弱类型语言js会做一个转换,是可以比较大小的如: '202107' > '202008'
}