1.计算相差小时，没有休息时间 

computed: {// 计算相差小时time() {let time = 0;if (this.ruleForm.date1 &&this.ruleForm.date2 &&this.ruleForm.date3 &&this.ruleForm.date4) {// 开始时间let date1 = this.ruleForm.date1;let y = date1.getFullYear();let m = date1.getMonth() + 1;m = m < 10 ? "0" + m : m;let d = date1.getDate();d = d < 10 ? "0" + d : d;let dateTime1 =y + "-" + m + "-" + d + " " + this.ruleForm.date2 + ":" + "00";// 结束时间let date3 = this.ruleForm.date3;let y2 = date3.getFullYear();let m2 = date3.getMonth() + 1;m2 = m2 < 10 ? "0" + m2 : m2;let d2 = date3.getDate();d2 = d2 < 10 ? "0" + d2 : d2;let dateTime2 =y2 + "-" + m2 + "-" + d2 + " " + this.ruleForm.date4 + ":" + "00";// 开始时间this.start = dateTime1;// 结束时间this.finish = dateTime2;var time1 = new Date(dateTime1);var time2 = new Date(dateTime2);let dateDiff = time2.getTime() - time1.getTime();// 计算出小时数let hours = dateDiff / (3600 * 1000);//time = hours.toFixed(1).replace(/\.0$/, "");if (time <= 0) {// "结束时间必须大于开始时间"this.tips = true;time = 0;} else {this.tips = false;}}return time + " 小时";},
}

2.计算工作时间，不含非工作时间及星期六星期天

   computed: {// 计算请假时间不包含中午12点到13点30的休息时间及9点到18点外的非工作时间time() {let time = 0;if (this.ruleForm.date1 &&this.ruleForm.date2 &&this.ruleForm.date3 &&this.ruleForm.date4) {// 开始时间let date1 = this.ruleForm.date1;let y = date1.getFullYear();let m = date1.getMonth() + 1;m = m < 10 ? "0" + m : m;let d = date1.getDate();d = d < 10 ? "0" + d : d;let dateTime1 =y + "-" + m + "-" + d + " " + this.ruleForm.date2 + ":" + "00";// 结束时间let date3 = this.ruleForm.date3;let y2 = date3.getFullYear();let m2 = date3.getMonth() + 1;m2 = m2 < 10 ? "0" + m2 : m2;let d2 = date3.getDate();d2 = d2 < 10 ? "0" + d2 : d2;let dateTime2 =y2 + "-" + m2 + "-" + d2 + " " + this.ruleForm.date4 + ":" + "00";// 开始时间this.start = dateTime1;// 结束时间this.finish = dateTime2;// 计算小时数time = this.calculateLeaveTime(dateTime1, dateTime2)}return time;},},

封装方法：传入 (年-月-日 时:分) 格式

 // 计算工作时间调休小时数calculateLeaveTime(startTime, endTime) {// console.log(startTime);// console.log(endTime);// 工作开始结束时间const workStart = 9;const workEnd = 18;// 休息开始结束时间const restStart = 12;const restEnd = 13;// 请假天数let day = 0;// 总计小时数let total_hour = 0;// 循环每天for (let date = new Date(startTime); date <= new Date(endTime); date.setDate(date.getDate() + 1)) {day++// 每天多少小时let dayLeaveTime = 0;// 获取今天是星期几let x = date.getDay();// 除开中午休息时间和星期六星期天if (![0, 6].includes(x)) {// 第一天要获取开始时间和结束时间if (day == 1) {// 小时let h = 0let h1 = startTime.split(" ")[1].split(":")[0] * 1let h2 = endTime.split(" ")[1].split(":")[0] * 1// 分let m1 = startTime.split(" ")[1].split(":")[1] * 1let m2 = endTime.split(" ")[1].split(":")[1] * 1// 判断结束时间是否大于开始时间if (h2 >= h1) {// 判断上午还是下午还是跨了中午if (h1 < restEnd && h2 >= restStart) {// 跨了中午 是否在休息时间内if (h1 >= restStart) {h1 = restStartm1 = 0}if (h2 < restEnd) {h2 = restEndm2 = 0}console.log("跨了中午", restStart - h1 + h2 - restEnd);h = restStart - h1 + h2 - restEnd} else if (h1 <= restStart && h2 <= restStart) {// 上午console.log("上午", h2 - h1);h = h2 - h1} else if (h1 >= restEnd && h2 >= restEnd) {// 下午console.log("下午", h2 - h1);h = h2 - h1}} else {// 判断上午还是下午还是跨了中午if (h1 >= restEnd && h2 < restEnd) {// 跨了中午if (h2 >= restStart) {h2 = restStartm2 = 0}console.log("跨了中午", workEnd - h1 + h2 - workStart);h = workEnd - h1 + h2 - workStart} else if (h1 <= restStart && h2 <= restStart) {// 上午console.log("上午", workEnd - h1 + h2 - workStart);h = workEnd - h1 + h2 - workStart - (restEnd - restStart)} else if (h1 >= restEnd && h2 >= restEnd) {// 下午console.log("下午", restStart - workStart + (workEnd - h1) + (h2 - restEnd));h = restStart - workStart + (workEnd - h1) + (h2 - restEnd)}}// 计算分钟console.log("第一天的小时", h);console.log("第一天的分钟", (m2 - m1) / 60);dayLeaveTime = h + ((m2 - m1) / 60)if (h < 0 || (h <= 0 && ((m2 - m1) / 60) <= 0)) {// "结束时间必须大于开始时间"this.tips = true;dayLeaveTime = 0;} else {this.tips = false;}} else {// 第二天开始 循环每天的工作时间范围的小时数for (let hour = workStart; hour < workEnd; hour++) {if (hour <= restStart || hour > restEnd) {dayLeaveTime += 1}}}}console.log(date.getDate() + "号的小时数", dayLeaveTime);total_hour += dayLeaveTime}if (day == 0) {// "结束时间必须大于开始时间"this.tips = true;} else {this.tips = false;}console.log(day + "天");console.log(total_hour + "小时");return total_hour + "小时";},

 

时间间隔30分钟 

3.设置结束时间不能小于开始时间

注意： :picker-options 属性失效，使用 :disabled-date 

<el-date-picker type="date" placeholder="结束日期" :disabled-date="disabledDate" v-model="ruleForm.date3" style="width: 100%"></el-date-picker>

    // 结束时间不能小于开始时间disabledDate(time){return time.getTime() < this.ruleForm.date1;},

 

 

有问题欢迎询问！