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

1
votes

The following piece of angular code displays the days in the current week:

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;
}

And the html:

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

And the output is:

  • January 24th, Sunday
  • January 25th, Monday
  • January 26th, Tuesday
  • January 27th, Wednesday
  • January 28th, Thursday
  • January 29th, Friday
  • January 30th, Saturday

what I want is a next and previous buttons. When I click the next button, the days in the next week will be shown. And when I click previous button, the days in the previous week will be shown.

Please help me.

2
angularjsmomentjs

2 Answers

1
votes

Something like below will work for you.

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>

The JSFiddle for same.

1
votes

You can do something like:

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();
  }
}

And the 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>