js判断多个日期时间段中是否互相存在交集
最近有个需求,使用Element的dateRange选择多个时间段时,要求它们不能有交集,任意两个日期都不能有交集,临界点也不行,网上找了些资料,都不是很满意,于是自己动手来实现了,主要思路是将每次选择的日期范围生成一个日期数组,然后使用lodash来对比这些数组是否有交集的元素。
使用到的包/库有:dayjs,lodash的intersection。
为什么不使用momentjs,实在因为它太大了,dayjs小巧,几乎都能实现moment功能。至于intersection则是用它来判断多个数组数组的交集,继续往下看!~~
//下面的例子,很明显2020-09-11是交集
const date1 = ['2020-09-01','2020-09-11'];
const date2 = ['2020-09-11','2020-09-30'];
下面用代码来实现吧。
通过el-date-picker收集用户选择的日期,这是一个范围
<el-date-picker @change="selectSpecialDateRange(index)" v-model="item.time" type="daterange" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
导入相应包
import dayjs from 'dayjs'
import {intersection} from 'lodash'
methods方法:
//这里主要 就是使用了dayjs干了一件事,
//将日期范围生成了一串数组,
//比如:['2020-09-01','2020-09-03']
//=> ['2020-09-01','2020-09-02','2020-09-03']
selectSpecialDateRange(index){
const timeRange = this.Datelist[index].time
this.Datelist[index].dateArr = []
let i=0
while(true){
const endTime = dayjs(timeRange[0]).add(i, "days").format("YYYY-MM-DD")
this.Datelist[index].dateArr.push(endTime)
//与最后一个日期相同,跳出循环
if(endTime == timeRange[1]){
break;
}
i++
}
//下面就每两两进行比较
const userArr1 = this.Datelist.map(v=>v.dateArr)
let flag = false
for(let i=0;i<index;i++){
//每次和之前选择的日期范围两两比较
const res = intersection(userArr1[index],userArr1[i])
if(!!res.length){
flag = true;
break;
}
}
if(!!flag){
this.deleitem(index) //做一个移除操作
this.$message.error('您选择的日期存在重叠')
return false;
}
}
效果图如下:

**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。