微信小程序使用vant时间选择器组件,修改开始结束时间,修改时间间隔,结束时间不能小于开始时间,解决选择时间之后再打开是默认时间不是之前选择的时间问题

<text class="required">开始时间:</text>
    <input class="input" type="text" bindtap="show_start" disabled="true" model:value="{{start_time}}" placeholder="请选择开始时间" />

 <text class="required">结束时间:</text>
    <input class="input" type="text" bindtap="show_end" disabled="true" model:value="{{end_time}}" placeholder="请选择结束时间" />

<!-- 开始时间 -->
<view wx:if="{{start_show}}" class="time">
  <van-datetime-picker type="datetime" value="{{ currentDate }}" filter="{{ filter }}" bind:cancel="cancel_start" bind:confirm="confirm_start" />
</view>
<!-- 结束时间 -->
<view wx:if="{{end_show}}" class="time">
  <van-datetime-picker type="datetime" value="{{ currentDate2 }}" filter="{{ filter }}" min-date="{{minDate}}" bind:cancel="cancel_end" bind:confirm="confirm_end" />
</view>
  // 计算工作时间的调休时间
  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
          // 处理选择最小值和最大值--如果选择器可以设置自定义的小时最小值和最大值就不需要加这个判断
          h1 = h1 < workStart ? workStart : h1
          h1 = h1 > workEnd ? workEnd : h1
          h2 = h2 < workStart ? workStart : h2
          h2 = h2 > workEnd ? workEnd : h2
          // 分
          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 + "小时";
  },
  // 打开开始时间选择
  show_start() {
    this.setData({
      start_show: true
    })
  },
  // 关闭开始时间选择
  cancel_start() {
    this.setData({
      start_show: false
    })
  },
  // 确认开始时间
  confirm_start(e) {
    const dateTime = this.timestampToDateTime(e.detail);
    //  console.log("开始时间", dateTime);
    this.setData({
      minDate: e.detail, //限制结束时间的开始时间
      currentDate: e.detail, //选择之后进行赋值不然下次打开还是默认值
      currentDate2: e.detail, //限制结束时间的开始时间
      start_time: dateTime,
      start_show: false
    })
  },
  // 打开结束时间选择
  show_end() {
    if (this.data.start_time == "") {
      wx.showToast({
        title: '请先选择开始时间',
        icon: "none"
      })
    } else {
      this.setData({
        end_show: true
      })
    }
  },
  // 关闭结束时间选择
  cancel_end() {
    this.setData({
      end_show: false
    })
  },
  // 确认结束时间
  confirm_end(e) {
    const dateTime = this.timestampToDateTime(e.detail);
    // console.log("结束时间", dateTime);
    // console.log(e.detail, this.data.minDate, e.detail - this.data.minDate);
    // let cycle_time = ((e.detail - this.data.minDate) / (1000 * 60))
    // console.log(cycle_time);
    // console.log((cycle_time / 60).toFixed(1).replace(/\.0$/, '') + "小时");
    let time = this.calculateLeaveTime(this.data.start_time, dateTime)
    // console.log("调休小时数", time);
    this.setData({
      end_time: dateTime,
      currentDate2: e.detail,
      end_show: false,
      cycle_time: time
    })
  },

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

巨蟹座守护骑士

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值