【vue】elementui组件，el-date-picker时间选择器，限制季度选择要求

效果要求：在某一季度有禁止选择下一季度时间要求，左边有四个季度选项

好咯，来下一步操作 

 上代码

<template>
    <div>
        <el-date-picker size="large" v-model="value2" type="daterange" :picker-options="pickerOptions" 
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
    </div>
</template>

 

export default{
    data(){
		return{
			pickerOptions: {
				shortcuts:[
					{
						text:"第一季度",
						onClick(picker) {
							var time = new Date()
							var year = time.getFullYear()
							var startTime = new Date(year,time.getMonth()-1,1)
							var endTime = new Date(year,time.getMonth()+2,0)
							var start = startTime.getTime()
							var end = endTime.getTime()
							picker.$emit('pick', [start, end]);
						}
					},
					{
						text:"第二季度",
						onClick(picker) {
							var time = new Date()
							var year = time.getFullYear()
							var startTime = new Date(year,time.getMonth()+2,1)
							var endTime = new Date(year,time.getMonth()+5,0)
							var start = startTime.getTime()
							var end = endTime.getTime()
							picker.$emit('pick', [start, end]);
						}
					},
					{
						text:"第三季度",
						onClick(picker) {
							var time = new Date()
							var year = time.getFullYear()
							var startTime = new Date(year,time.getMonth()+5,1)
							var endTime = new Date(year,time.getMonth()+8,0)
							var start = startTime.getTime()
							var end = endTime.getTime()
							picker.$emit('pick', [start, end]);
						}
					},
					{
						text:"第四季度",
						onClick(picker) {
							var time = new Date()
							var year = time.getFullYear()
							var startTime = new Date(year,time.getMonth()+8,1)
							var endTime = new Date(year,time.getMonth()+11,0)
							var start = startTime.getTime()
							var end = endTime.getTime()
							picker.$emit('pick', [start, end]);
						}
					}
				],
				onPick:({maxDate,minDate})=>{
					const month = minDate.getMonth()+1;
					var time = new Date()
					var year = time.getFullYear()
						
					if(1 <= month && month < 4){
						console.log("第一季度");
						var startTime = new Date(year,time.getMonth()-1,1);//一月份
						var endTime = new Date(year,time.getMonth()+2,0);//三月份
						this.start = startTime.getTime()
						this.end = endTime.getTime()
						// console.log(new Date(this.start));
					}else if(4 <= month && month < 7){
						console.log("第二季度");
						var startTime = new Date(year,time.getMonth()+2,1);//四月份
					    var endTime = new Date(year,time.getMonth()+5,0);//六月份
						this.start = startTime.getTime()
						this.end = endTime.getTime()
						// console.log(new Date(this.start));
						// console.log(new Date(this.end));
					}else if(7 <= month && month < 10){
						console.log("第三季度");
						var startTime = new Date(year,time.getMonth()+5,1);//七月份
						var endTime = new Date(year,time.getMonth()+8,0);//九月份
						this.start = startTime.getTime()
						this.end = endTime.getTime()
						// console.log(new Date(this.start));
						// console.log(new Date(this.end));
					}else {
						console.log("第四季度");
						var startTime = new Date(year,time.getMonth()+8,1);//十月份
						var endTime = new Date(year,time.getMonth()+11,0);//十二月份
						this.start = startTime.getTime()
						this.end = endTime.getTime()
						// console.log(new Date(this.start));
						// console.log(new Date(this.end));
					}
						
					if(maxDate){
						this.start = ""
						this.end = ""
					}
				},
				disabledDate:time=>{
					if(!!this.start && !!this.end){
						return time.getTime() < this.start || time.getTime() > this.end ;
					}
				}
			},
			value2: []
		}
	}
}

总结：

好吧，代码有点臃肿，没有优化，写的比较死板。要是符合你们的需求，可以自己优化哦