代码之家 › 专栏 › 技术社区 › AJ-

AngularJS如何向返回日期的函数添加+1

momentjs angularjs

4

AJ- · 技术社区 · 8 年前

我有一个标题中有5个单元格的表格,每个单元格对应一周(例如:第01周、第02周等等)。

在第一个单元格中,周如下所示:

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

结果是标题单元格中的文本:“第01周”。

控制器中显示周数的代码为:

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

它始终返回所选月份第一周的编号, 用户可以使用日期选择器从一个月转到另一个月,并在表中显示该月的周数。

展示其他4周的最佳方式是什么? 因为我只得到第一周的数字,所以我应该在其他4个单元格中输入什么?

我在考虑一个计数器,所以它会给我得到的数字加上+1:

返回时刻。utc(本日期)。格式(“WW”);

但问题是,这不会出现在ng重复中,但表标题是静态的,所以我考虑的一个解决方案是在5个标题单元格中放置类似的内容:

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

因此,当用户切换月份时,每个星期的数字都是正确的,但它不起作用,因为我从函数中获得了一个字符串,并且不知道如何使用momentJS在该函数中解析它。

如果有人对我的想法有解决方案,或者有更好的方法来实现这一点,请让我知道

编辑解决方案:

最后,我找到了一个只使用momentJS的解决方案。

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

1 回复 | 直到 8 年前

1

lin 8 年前

我会用一个简单而智能的过滤器来实现这一点,就像我在这里创建的一样 >> Demo fiddle :

看法

<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` 作用域和日期选择器

>> Demo fiddle :

看法

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

AngularJS如何向返回日期的函数添加+1

看法

AngularJS应用程序

完整解决方案包括: selectedPeriod 作用域和日期选择器

看法

AngularJS应用程序

完整解决方案包括: `selectedPeriod` 作用域和日期选择器