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 = 0
            let h1 = startTime.split(" ")[1].split(":")[0] * 1
            let h2 = endTime.split(" ")[1].split(":")[0] * 1
            // 分
            let m1 = startTime.split(" ")[1].split(":")[1] * 1
            let m2 = endTime.split(" ")[1].split(":")[1] * 1
            // 判断结束时间是否大于开始时间
            if (h2 >= h1) {
              // 判断上午还是下午还是跨了中午
              if (h1 < restEnd && h2 >= restStart) {
                // 跨了中午 是否在休息时间内
                if (h1 >= restStart) {
                  h1 = restStart
                  m1 = 0
                }
                if (h2 < restEnd) {
                  h2 = restEnd
                  m2 = 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 = restStart
                  m2 = 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;
     },

 

 

有问题欢迎询问！