elementplus 使用日期时间选择器，设置可选范围为前后大于2年且只能选择历史时间不能大于当前时间点

• 需求：时间选择器可选的时间范围进行限制，-2年<a<2年且a<new Date().getTime()
• 核心：这里需要注意plus版没有picker-options换成disabled-date属性了，使用了visible-change和calendar-change属性
• 逻辑：另设一个参数记录第一个点击的时间点，根据这个时间点设置时间范围，使用visible-change和calendar-change属性来进行第一个时间点的记录和清空
• 代码环境：vue3 elementplus ts
• 效果
  
• 当前时间为25-2-10，且没有进行第一位的时间选择所以仅大于该日期的不能选择
  
• 选择了第一位时间24-2-6，所以可选时间范围为 小于该值2年内或者大于该值2年内且小于当前时间25-2-10的值，如下方几张图所示
  
  • 小于22年2月6号的不能选
    
  • 大于26-2-6的且大于25-2-10的不能选(我这个24年选的不太好，应该选22年就能展示了但是不想截图了哈哈，应该能理解我的意思吧）
    
• 代码

// h5
<el-date-picker
						v-model="rightTime"
						type="datetimerange"
						range-separator="-"
						start-placeholder="开始时间"
						end-placeholder="结束时间"
						:disabled-date="disabledDate"
						format="YYYY-MM-DD HH:mm:ss"
						value-format="YYYY-MM-DD HH:mm:ss"
						@visible-change="onvisibleChange"
						@calendar-change="oncalendarChange"
					/>

// js 
const rightTime = ref([])
const chooseDay= ref(null) // 记录第一个点击的时间点

const onvisibleChange = (val)=>{
	if(val){
		chooseDay.value = null
	}
}
const oncalendarChange = (val)=>{
	const [chooseFirstDate] = val
  	chooseDay.value = new Date(chooseFirstDate)

}


const disabledDate = (time: Date) => { // 返回true就禁用
	const now = new Date(); // 当前时间
	if (!chooseDay.value) { // 选择的第一个日期不存在时的情况
		// return false  // 选择的第一个日期不存在时可任意选择开始日期
		return time.getTime() > now.getTime()  // 不能选择比当前时间点打的时间（只能选择历史时间）
	}else{ // 当点击第一个时间点后，可选时间范围为，大于a时间点2年内的或者小于a时间点2年内的
		const twoYearsAgoMin = new Date(chooseDay.value.getFullYear() - 2, chooseDay.value.getMonth(), chooseDay.value.getDate());
		const twoYearsAgoMax = new Date(chooseDay.value.getFullYear() + 2, chooseDay.value.getMonth(), chooseDay.value.getDate());
		return time.getTime() > now.getTime() || time.getTime() < twoYearsAgoMin || time.getTime() > twoYearsAgoMax 
	}
	
	
	
}