按周切换的时间选择器

最新推荐文章于 2025-09-11 04:35:39 发布

原创最新推荐文章于 2025-09-11 04:35:39 发布 · 1.8k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#前端

本文介绍了一种按周切换的时间选择器实现方法，通过JavaScript操作日期对象，实现了获取当前周、上一周及下一周的功能，适用于日历、时间范围筛选等场景。

今天遇到一个要按周切换的时间选择器,简单的做一下记录

onShow: function () {
      let curD = new Date();
      let firstD = new Date();
      let lastD = new Date();
      this.setData({
            curD: curD,
            firstD: firstD,
            lastD: lastD
      })
      this.getTime()
},

getTime() {  //获取当前周
      let curD = this.data.curD
      let firstD = this.data.firstD
      let lastD = this.data.lastD
      let intD = new Date();
      let dayTime = 24 * 60 * 60 * 1000;
      var dateLong = curD.getTime();
      if (curD.getDay() == 0) { //当前时间取代过去的时间
            dateLong = dateLong - (6 * dayTime);
      } else {
            dateLong = dateLong - (curD.getDay() - 1) * dayTime;
      }
      let d = curD.setTime(dateLong);
      let tt = Date.parse(firstD)
      firstD = curD;
      lastD.setTime(firstD.getTime() + 6 * dayTime);
      let st = firstD.getFullYear() + '-' + (firstD.getMonth() + 1) + '-' + firstD.getDate();
      if (tt > Date.parse(st)){
            st = intD.getFullYear() + '-' + (intD.getMonth() + 1) + '-' + intD.getDate();
      }
      let ss = st + ' 至 ' + lastD.getFullYear() + '-' + (lastD.getMonth() + 1) + '-' + lastD.getDate();
      
      this.setData({
            ss: ss
      })
},

backDate() {  //上一周
      let curD = this.data.curD
      let dayTime = 24 * 60 * 60 * 1000;
      var dateLong = curD.getTime();
      curD.setTime(dateLong - (6 * dayTime));
      this.setData({
            curD: curD
      })
     this. getTime();
},
nextDate() {  //下一周
      let curD = this.data.curD
      let dayTime = 24 * 60 * 60 * 1000;
      var dateLong = curD.getTime();
      curD.setTime(dateLong + (7 * dayTime));
      this.setData({
            curD: curD
      })
      this.getTime();
},