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

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>
相关推荐
Martin -Tang1 小时前
Vue 3 中,ref 和 reactive的区别
前端·javascript·vue.js
FakeOccupational3 小时前
nodejs 020: React语法规则 props和state
前端·javascript·react.js
放逐者-保持本心,方可放逐3 小时前
react 组件应用
开发语言·前端·javascript·react.js·前端框架
曹天骄4 小时前
next中服务端组件共享接口数据
前端·javascript·react.js
郝晨妤6 小时前
鸿蒙ArkTS和TS有什么区别?
前端·javascript·typescript·鸿蒙
AvatarGiser6 小时前
《ElementPlus 与 ElementUI 差异集合》Icon 图标 More 差异说明
前端·vue.js·elementui
喝旺仔la6 小时前
vue的样式知识点
前端·javascript·vue.js
别忘了微笑_cuicui6 小时前
elementUI中2个日期组件实现开始时间、结束时间(禁用日期面板、控制开始时间不能超过结束时间的时分秒)实现方案
前端·javascript·elementui
尝尝你的优乐美6 小时前
vue3.0中h函数的简单使用
前端·javascript·vue.js
windy1a6 小时前
【C语言】js写一个冒泡顺序
javascript