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

Question

以下 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 日，星期六

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

请帮帮我

Answer 1

您可以这样做：

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>

Answer 2

类似下面的内容适合您。

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相同。

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

How can I get the next and previous days in a week using momentjs in Angularjs

angularjs

momentjs