美文网首页前端学习笔记
关于时间的处理--根据日期算出周数、周一及周日的日期

关于时间的处理--根据日期算出周数、周一及周日的日期

作者: 简小咖 | 来源:发表于2018-01-25 11:18 被阅读174次

    根据当前日期得到周数和周一及周日的日期
    首先效果如下:


    image.png

    左右箭头可以前后获得前后周数和日期,达到本周的时候,不能再向后翻


    image.png
    先自定义一个时间过滤器
    // 获得当前日期的周一或周日
    app.filter('MonSun', function () {
      return function (date, str) {
        var nowTime = date.getTime();   //当前时间的毫秒数
        var day = date.getDay();   //当前时间的星期几
        var oneDayTime = 24 * 60 * 60 * 1000;   
        //显示周一
        var MondayTime = nowTime - (day - 1) * oneDayTime;  
        //显示周日
        var SundayTime = nowTime + (7 - day) * oneDayTime;
        //初始化日期时间
        var monday = new Date(MondayTime);
        var sunday = new Date(SundayTime);
        if (str == "monday") {
          return monday
        } else if (str == "sunday")
          return sunday
      }
    
    });
    

    给所有箭头定义方法

    //左右箭头
      $scope.prev = function () {
        $scope.reportId = "";  
        $scope.isAct = true;
        var date = new Date();
        var nowtime = date.getTime();
        var prevTime = $scope.today.getTime() - 7 * 24 * 3600 * 1000;
        $scope.today = new Date(prevTime);
        $scope.year = $scope.today.getFullYear()
        $scope.week = $filter('date')($scope.today, 'w');
    
        checkWR();
      }
      $scope.next = function () {
        $scope.reportId = "";
        var nextTime = $scope.today.getTime() + 7 * 24 * 3600 * 1000;
        $scope.today = new Date(nextTime);
        $scope.year = $scope.today.getFullYear()
        $scope.week = $filter('date')($scope.today, 'w');
        checkWR();
        var date = new Date();
        var nowtime = date.getTime() - 7 * 24 * 3600 * 1000;
        if (nextTime > nowtime) {
          $scope.isAct = false;
        }
      }
    

    html展示

     <div class="week-selector">
           <span class="left" ng-click="prev()">
                 <i class="head-icon glyphicon glyphicon-menu-left"></i>
           </span>  //左箭头
          <span class="right" ng-click="next()" ng-model="isAct" 
    ng-if="isAct">
               <i class="head-icon glyphicon glyphicon-menu-right"></i>
          </span>  //右箭头
           <div class="week">
                <p class="date">
                 <span>{{year}}</span>年第<span>{{week}}</span>周</p>
                <p class="range">
    {{today|MonSun:'monday'|date:'MM月dd日'}}~
    {{today|MonSun:'sunday'|date:'MM月dd日'}}</p>
           </div>
    </div>
    

    相关文章

      网友评论

        本文标题:关于时间的处理--根据日期算出周数、周一及周日的日期

        本文链接:https://www.haomeiwen.com/subject/ojamaxtx.html