解决element-plus的Date Picker日期选择器组件禁用时间的坑

目前需求是有一个表单，其中有多个日期组件需要选择时间范围，并且选择的范围不可以有交集重复，所以这里需要用到Date Picker中的disabled-date属性，来判断该日期是否被禁用。

直接上代码，这个是我写的demo代码，多个date-picker组件以及禁用时间方法

<template><div style="width: 100%"><div>禁用选中的日期</div><div v-for="item in timePeriod" :key="item.key" style="margin: 10px"><el-date-picker v-model="item.time" :disabled-date="disableData" value-format="YYYY-MM-DD" type="daterange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"/></div></div>
</template><script setup>
const timePeriod =ref([{key:1,time: []},{key:2,time: []},{key:3,time: []}
])const disableData = (Data) =>{const currentDate = Data.getTime();let isDisabled = falsefor(let i=0;i<timePeriod.value.length;i++){if(timePeriod.value[i].time.length){const [startTime, endTime] = timePeriod.value[i].time;const start = new Date(startTime).getTime();const end = new Date(endTime).getTime();if(currentDate>=start && currentDate<=end){isDisabled = truebreak}}}return isDisabled
}
</script><style scoped></style>

可以看到前两个date-picker组件选择了时间段，点击第三个组件可以看到前两个选择的时间都被禁用了，不能被选中；但是，这里有一个小问题，可以看到我选择的是2024-7-9日到2024-7-19日以及2024-7-24日到2024-8-1日，但是可以看到2024-7-9和2024-7-24却没有被禁用。

可以看到禁用方法里的判断条件写的也没有问题，于是我打印了一下currentDate，start，end。

于是我发现了一个问题，const start = new Date(startTime).getTime(); 这行代码获取的时间是8点的，而不是当天0点，所以在判断条件那里currentDate>=start 这里就不会成立，自然这一天就不会被禁用

所以需要对禁用方法进行修改，思路就是获取startTime的日期对象，然后调用setHours将时间设为0点，就可以将起始时间也禁用了。

修改后的方法

const disableData = (Data) =>{const currentDate = Data.getTime();let isDisabled = falsefor(let i=0;i<timePeriod.value.length;i++){if(timePeriod.value[i].time&&timePeriod.value[i].time.length){const [startTime, endTime] = timePeriod.value[i].time;// 获取 startTime 当天的日期对象const startDate = new Date(startTime);startDate.setHours(0, 0, 0, 0); // 设置为当天的 00:00:00const start = startDate.getTime();const end = new Date(endTime).getTime();console.log(currentDate,start,end)if(currentDate>=start && currentDate<=end){isDisabled = truebreak}}}return isDisabled
}

修改后的效果