vue element 多个日期组件选择禁止重叠

林间风雨2023-12-26 22:57
bash 复制代码
<template>
  <div>
    <div v-for="(item, index) in timeList" :key="index">
      <el-date-picker
        v-model="item.time"
        type="daterange"
        :picker-options="pickerOption(index)"
        range-separator="-"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      />
      <el-button
        type="text"
        @click="delTime(index)"
      >删除</el-button>
    </div>
    <el-button
      type="text"
      @click="addTime"
    >+添加时间</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 用于存储所有日期选择器的选中值
      timeList: []
    }
  },
  methods: {
    addTime() {
      const ele = {
        time: []
      }
      this.timeList.push(ele)
      console.log('--', this.timeList)
    },
    delTime(index) {
      this.timeList.splice(index, 1)
    },
    pickerOption(index) {
      const option = {
        disabledDate: (time) => {
          // 过滤当前日期
          const times = this.timeList.map(it => it.time).filter((it, i) => it && i !== index)
          let timeScope = null
          times.forEach((item, indexs) => {
            if (indexs === 0) {
              // -1 解决开始日之前一天不可选中的问题
              timeScope = (time.getTime() > new Date(item[0]).getTime() - 60 * 60 * 24 * 1000 &&
                time.getTime() < new Date(item[1]).getTime() + 1)
            } else {
              timeScope = timeScope || (time.getTime() > new Date(item[0]).getTime() - 60 * 60 * 24 * 1000 &&
                time.getTime() < new Date(item[1]).getTime() + 1)
            }
          })
          return timeScope || (time.getTime() > new Date('2023-12-30').getTime() - 60 * 60 * 24 * 1000 || time.getTime() < new Date('2023-12-01').getTime())
        }
      }
      return option
    }
  }
}
</script>