elementUI，vue，前端判断时间是否有交集(重合)方法

分成三个部分

- html
- [※ 具体实现方法](#※ 具体实现方法)
- methods
- - 帮助理解逻辑图：![@smallredBook：灵魂画手，业余爱好支持支持](https://i-blog.csdnimg.cn/direct/665950ee60964ef8912ce4f1a98dcc0e.jpeg#pic_center))
- 简化：由上面的逻辑反推[^1]

html

javascript 复制代码

<template>
	<el-form ref="Froms" :model="formData" :rules="rules" label-width="100px" size="small">
		<el-form-item label="日售卖区间:" prop="saleDayTime">
			<div style="border: 1px solid #DCDFE6; padding: 5px 0px 0px 5px; border-radius: 5px; margin-bottom: 5px;" v-if="this.formData.saleDayTime && this.formData.saleDayTime.length > 0">
				<el-tag v-for="(item,index) in formData.saleDayTime" :key="index" closable @close="handleClose(index)" style="margin-right: 5px; margin-bottom: 5px;">
					{{item}}
				</el-tag>
			</div>
			<el-time-picker v-model="tempTimeStart" :picker-options="{selectableRange: `00:00:00 -${tempTimeEnd ? tempTimeEnd : '23:59:59'}`}" placeholder="选择时间" value-format="HH:mm:ss" style="width: 120px;"></el-time-picker>
			<el-time-picker v-model="tempTimeEnd" :picker-options="{ selectableRange: `${tempTimeStart ? tempTimeStart : '00:00:00'} - 23:59:59`}"placeholder="选择时间" value-format="HH:mm:ss" style="width: 120px;"></el-time-picker>
			<el-button size="small" @click="addTime" type="primary" style="margin-left: 10px;">
				新增可用时间段
			</el-button>
		</el-form-item>
	</el-form>
</template>

※ 具体实现方法

javascript 复制代码

<script>
export default {
	// 判断时间是否有交集方法
	const checkSaleDay = (rule, value, callback) => {
		// console.log(value) // 时间格式: ['10:56:58-13:56:59']
		let arrOne = [];
		value.forEach((item) => {
			  let arr1 = item.split('-');
			  // 注："24小时制"时间，将"时"、"分"、"秒"，位上的时间以字符串形式进行拼接，拼接之后的数字时间越晚的数字会越大
		      let startTime = arr1[0].split(':')[0] + arr1[0].split(':')[1] + arr1[0].split(':')[2]; // "10"+"56"+"58", 以字符串形式拼接
		      let endTime = arr1[1].split(':')[0] + arr1[1].split(':')[1] + arr1[1].split(':')[2]; // "13"+"56"+"59", 以字符串形式拼接
		      arrOne.push({
	         	start: startTime,
	          	end: endTime
	        });
		});
		var len = arrOne.length;
		// console.log(arrOne)
		let satisfied = true;
		for (var i = 0; i < len; i++) {
			for (var j = i + 1; j < len; j++) {
				let start1 = arrOne[i].start;
		        let start2 = arrOne[j].start;
		        let end1 = arrOne[i].end;
		        let end2 = arrOne[j].end;
		        if (start1 < start2 && start2 < end1) { // 例:start1=3，end1=6；start2=5，end2=10
		           satisfied = false;
		        } else if (start1 > start2 && end2 > start1) { // 例:start1=3，end1=6；start2=2，end2=5
	               satisfied = false;
	            } else if (start1 > start2 && end1 < end2) { // 例:start1=3，end1=6；start2=2，end2=10
	               satisfied = false;
	           }  else if (start1 < start2 && end1 > end2) { // 例:start1=3，end1=6；start2=4，end2=5
	               satisfied = false;
	           }
			}
		}
		if (satisfied) {
	        callback();
	    } else {
	        callback(new Error('售卖区间产生存在交集，请确认后重选'));
	    }
	}
	data() {
		return{
			tempTimeStart: '', // 所选开始时间回显
      		tempTimeEnd: '', // 所选结束时间回显
			formData:{
				saleDayTime: [],
			},
			rules: {
				saleDayTime: [{
		          required: true,
		          message: '请选择日售卖区间',
		          trigger: 'change'
		        },{
		          required: true,
		          validator: checkSaleDay,
		          trigger: 'change'
		        }]
			}
		}
	},
}
<script>

methods

javascript 复制代码

<script>
	export default {
		methods:{
			// 删除所选时间
			handleClose(index) {
		       this.formData.saleDayTime.splice(index, 1);
		    },
			// 新增可用时间段
			addTime() {
			   if (!this.tempTimeStart || !this.tempTimeEnd) {
			      return;
			   }
			   if (!this.formData.saleDayTime) {
			      this.formData.saleDayTime = [];
			   }
			   // 把选择的时间加入数组里
			   this.formData.saleDayTime.push(this.tempTimeStart + '-' + this.tempTimeEnd);
			   // 加入成功后清空回显值
			   this.tempTimeStart = '';
			   this.tempTimeEnd = '';
			}
		}
	}
<script>

帮助理解逻辑图：

简化：由上面的逻辑反推^1^

javascript 复制代码

<script>
export default {
	// 判断时间是否有交集方法
	const checkSaleDay = (rule, value, callback) => {
		// console.log(value) // 时间格式: ['10:56:58-13:56:59']
		let arrOne = [];
		value.forEach((item) => {
			  let arr1 = item.split('-');
			  // 注："24小时制"时间，将"时"、"分"、"秒"，位上的时间以字符串形式进行拼接，拼接之后的数字时间越晚的数字会越大
		      let startTime = arr1[0].split(':')[0] + arr1[0].split(':')[1] + arr1[0].split(':')[2]; // "10"+"56"+"58", 以字符串形式拼接
		      let endTime = arr1[1].split(':')[0] + arr1[1].split(':')[1] + arr1[1].split(':')[2]; // "13"+"56"+"59", 以字符串形式拼接
		      arrOne.push({
	         	start: startTime,
	          	end: endTime
	        });
		});
		var len = arrOne.length;
		// console.log(arrOne)
		let satisfied = false; // 注意这时候这里的变量值为false了哦
		for (var i = 0; i < len; i++) {
			for (var j = i + 1; j < len; j++) {
				let start1 = arrOne[i].start;
		        let start2 = arrOne[j].start;
		        let end1 = arrOne[i].end;
		        let end2 = arrOne[j].end;
		        if (end1 < start2 || start1 < end2) { // 例:start1=3，end1=6；start2=7，end2=10；start1=3，end1=6；start2=1，end2=2
		           satisfied = true;
		        }
			}
		}
		if (satisfied) {
	        callback();
	    } else {
	        callback(new Error('售卖区间产生存在交集，请确认后重选'));
	    }
	}
}
<script>

反推思维逻辑图：
↩︎