AngularJS how to add +1 to a function that returns a date

Question

I have a table with 5 cells in the title, each cell corresponds to a week (example: week 01, week 02, etc.).

In the first cell, the week is given as follows:

<div class="monthCells">Week {{vm.selectedPeriod}}</div>

and the result will be the text: "Week 01" in the header cell.

Code in the controller to display the week number:

return moment.utc(this.date).format("WW");

It always returns the number of the FIRST week of the selected month, the user can select from month to month with the choice of date, and in the table he will show the weeks in this month.

What is the best way to display the remaining 4 weeks? Because I only get the number for the first week, so what do I put in the other 4 cells?

I was thinking of a counter, so it adds +1 to the number I get:

return moment.utc(this.date).format("WW");

, ng-, , , , 5 :

{{vm.selectedPeriod}}
{{vm.selectedPeriod +1}}
{{vm.selectedPeriod +2}}
{{vm.selectedPeriod +3}}
{{vm.selectedPeriod +4}}

, , , , , .

- ,

edit :

jS.

{{vm.date | amDateFormat : 'WW'}} 
{{vm.date | amAdd : '1' : 'w' | amDateFormat : 'WW'}}
{{vm.date | amAdd : '2' : 'w' | amDateFormat : 'WW'}}

Answer 1

, → :

<div ng-controller="MyCtrl">
  <div class="monthCells">Week {{currentDate|dateWeekFilter:0}}</div>
  <div class="monthCells">Week {{currentDate|dateWeekFilter:1}}</div>
  <div class="monthCells">Week {{currentDate|dateWeekFilter:2}}</div>
  <div class="monthCells">Week {{currentDate|dateWeekFilter:3}}</div>
</div>

AngularJS

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function ($scope) {
    $scope.currentDate = moment.utc();
});

myApp.filter('dateWeekFilter', function () {
    return function (date, weeksToAdd) {
      return moment(date).add(weeksToAdd, 'w').format("WW");
    }
});

---

, : selectedPeriod scope datepicker

→ -:

<div ng-controller="MyCtrl">
  <datepicker>
    <input ng-model="datePickerDate" ng-change="dateChanged()" type="text"/>
  </datepicker>
  <div class="monthCells">Week {{currentDate|dateWeekFilter:selectedPeriod}}</div>
  <div class="monthCells">Week {{currentDate|dateWeekFilter:selectedPeriod+1}}</div>
  <div class="monthCells">Week {{currentDate|dateWeekFilter:selectedPeriod+2}}</div>
  <div class="monthCells">Week {{currentDate|dateWeekFilter:selectedPeriod+3}}</div>
</div>

AngularJS

var myApp = angular.module('myApp',['720kb.datepicker']);

myApp.controller('MyCtrl', function ($scope) {

        //Init
    $scope.currentDate = moment.utc();
    $scope.datePickerDate = $scope.currentDate.toDate();
    $scope.selectedPeriod = 0;

    //date change handling
    $scope.dateChanged = function () {
         $scope.currentDate = moment.utc($scope.datePickerDate);
    }

});

myApp.filter('dateWeekFilter', function () {
    return function (date, weeksToAdd) {
      return moment(date).add(weeksToAdd, 'w').format("WW");
    }
});