前端学习笔记

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

2018-01-25  本文已影响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>
上一篇下一篇

猜你喜欢

热点阅读