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>
相关推荐
OEC小胖胖16 分钟前
Vue 3 中 onUnload 和 onPageScroll 使用详解
前端·javascript·vue.js·前端框架·web
秋田君1 小时前
uniapp中使用Mescroll实现下拉刷新与上拉加载项目实战
javascript·uni-app
川石教育2 小时前
Vue前端开发-slot传参
前端·vue.js·前端框架·前端开发·slot组件
确实菜,真的爱2 小时前
vue3 element plus 把表格数据导出到excel
javascript·vue.js·excel
一舍予2 小时前
nuxt3项目搭建相关
开发语言·javascript·vue.js·nuxt
新时代的弩力2 小时前
【Cesium】--viewer,entity,dataSource
前端·javascript·vue.js
无恃而安2 小时前
localStorage缓存 接口 配置
javascript·vue.js·缓存
_大菜鸟_3 小时前
修改element-ui-时间框date 将文字月份改为数字
javascript·vue.js·ui
尽兴-3 小时前
Vue 中父子组件间的参数传递与方法调用
前端·javascript·vue.js·父子组件·参数传递·组件调用
JerryXZR3 小时前
Vue开发中常见优化手段总结
前端·javascript·vue.js·vue性能优化