如何在Angularjs中使用momentjs获得一周中的下一天和前几天答案

【问题标题】：How can I get the next and previous days in a week using momentjs in Angularjs如何在Angularjs中使用momentjs获得一周中的下一天和前几天
【发布时间】：2016-01-19 11:07:26
【问题描述】：

下面的 Angular 代码显示了本周的天数：

function TodoCtrl($scope) {

  var currentDate = moment();
  var weekStart = currentDate.clone().startOf('week');
  var weekEnd = currentDate.clone().endOf('week');

  var days = [];
  for (i = 0; i <= 6; i++) {
    days.push(moment(weekStart).add(i, 'days').format("MMMM Do,dddd"));
  };
  $scope.weekDays = days;
}

还有html：

<div ng-app>
  <div ng-controller="TodoCtrl">
    <div ng-repeat="day in weekDays">
      {{day}}
    </div>
  </div>
</div>

输出是：

1 月 24 日，星期日
1 月 25 日，星期一
1 月 26 日，星期二
1 月 27 日，星期三
1 月 28 日，星期四
1 月 29 日，星期五
1 月 30 日，星期六

我想要的是下一个和上一个按钮。当我单击下一个按钮时，将显示下一周的天数。当我单击上一个按钮时，将显示前一周的天数。

请帮帮我。

【问题讨论】：

标签： angularjs momentjs

【解决方案1】：

类似下面的东西会为你工作。

function TodoCtrl($scope) {
    var currentDate = moment();
    
     var fnWeekDays = function(dt) {

        var currentDate = dt;
        var weekStart = currentDate.clone().startOf('week');
        var weekEnd = currentDate.clone().endOf('week');

        var days = [];
        for (i = 0; i <= 6; i++) {

            days.push(moment(weekStart).add(i, 'days').format("MMMM Do,dddd"));

        };
        return days;
    }
    
    $scope.weekDays = fnWeekDays(currentDate);
    $scope.nextWeek = function(dt) {
        $scope.weekDays = fnWeekDays(moment(dt, "MMMM Do,dddd").add(1, 'days'));
    };
    $scope.previousWeek = function(dt) {
        $scope.weekDays = fnWeekDays(moment(dt, "MMMM Do,dddd").subtract(1, 'days'));
    };

   
}

.done-true {
  text-decoration: line-through;
  color: grey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.1/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
  <div ng-controller="TodoCtrl">
  <a ng-click="previousWeek(weekDays[0])">Previous</a>
  <a ng-click="nextWeek(weekDays[6])">Next</a>
    <div ng-repeat="day in weekDays">
      {{day}}
    </div>
  </div>
</div>

JSFiddle 相同。

【讨论】：

【解决方案2】：

你可以这样做：

function TodoCtrl($scope) {
  var currentDate = moment();

  $scope.calculateWeekDay = function() {
    var weekStart = currentDate.clone().startOf('week');
    var weekEnd = currentDate.clone().endOf('week');

    var days = [];
    for (i = 0; i <= 6; i++) {
      days.push(moment(weekStart).add(i, 'days').format("MMMM Do,dddd"));
    };

    $scope.weekDays = days;
  }

  $scope.onNextWeekClicked = function() {
    currentDate = currentDate.add(1, week);
    $scope.calculateWeekDay();
  }

  $scope.onPreviousWeekClicked = function() {
    currentDate = currentDate.subtract(1, week);
    $scope.calculateWeekDay();
  }
}

还有 HTML：

<div ng-app>
  <div ng-controller="TodoCtrl">
    <div ng-repeat="day in weekDays">
      {{day}}
    </div>

    <button ng-click="onNextWeekClicked()">Next week</button>
    <button ng-click="onPreviousWeekClicked()">Previous week</button>
  </div>
</div>

【讨论】：