Vue3 ele-plus 关于日期选择范围不可跨月

需求：日期选择范围不可跨月（选了第一个之后，其他月份的日期变成灰色，不可选）

上图要变成下图满足需求

 解决：首先要了解几个事件

 然后就开始处理了

 然后这样可以初步满足需求，但有个小bug，当点击第一次的时候，但我不去点第二次就没有了结束时间，所以它会一直卡在那里，并且关闭弹窗都没用，而且我还找不到第一次点击他的值存放在哪里的。

所以我选择直接g,当然不是真g，我直接摧毁一波弹窗，直捣黄龙

 然后再加上关闭弹窗的时候，直接来一手偷梁换柱

 把月份开始日期和结束日期全部重置；并且把表单重置一手；这样就可以得到我们想要的效果了；

代码部分：

<el-date-picker 
	v-model="state.ruleForm1.time1" 
	type="daterange" 
	range-separator="-"
	start-placeholder="开始日期" 
	value-format="YYYY-MM-DD" 
	end-placeholder="结束日期" 
	size="default"
	style="width: 100%" 
	:clearable="true"
	@calendar-change="calendarChange"
	@visible-change="visibleChange" 
	:disabled-date="disabledFn" 
	@change="changeTime" />






let timeStar = ref(0)
let timeEnd = ref(0)
const calendarChange = (e: Date[]) => {
	let year = Number(formatDate(e[0], 'YYYY-mm-dd').substring(0, 4))
	let month = Number(formatDate(e[0], 'YYYY-mm-dd').substring(5, 7))
	let day = getMonthDay(year, month)
	let stringTime = year + '-' + month + '-' + day
	let stringTime2 = year + '-' + month + '-01'
	timeStar.value = Date.parse(new Date(stringTime2));
	timeEnd.value = Date.parse(new Date(stringTime));
};
const getMonthDay = (year: number, month: number) => {
	let days = new Date(year, month, 0).getDate()
	return days
}
const visibleChange = (e: any) => {
	if (e) {
	}
};
const changeTime = (e) => {
	if (!e) {
		timeEnd.value = 0
		timeStar.value = 0
	}
}
const disabledFn = (current) => {
	if (timeEnd.value == 0) return false
	return current.getTime() > timeEnd.value || current.getTime() < timeStar.value
};







// 关闭弹窗
const closeDialog = () => {
	timeEnd.value = 0
	timeStar.value = 0
	dialogRuleForm1Ref.value?.resetFields();
	dialogRuleForm2Ref.value?.resetFields();
}

有啥好的建议都可以说的，我可以学习学习