解决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 = false

  for(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 = true
        break
      }
    }
  }
  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 = false

  for(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:00
      const start = startDate.getTime();
      const end = new Date(endTime).getTime();
      console.log(currentDate,start,end)
      if(currentDate>=start && currentDate<=end){
        isDisabled = true
        break
      }
    }
  }
  return isDisabled
}

修改后的效果