AngularJs:显示月份编号的月份名称

时间:2014-01-31 12:41:58

标签: angularjs angularjs-directive

我将月份作为数字(1,2,3,...),并希望显示相应的名称。 我怎么能这样做?

是否可以使用{{ date_expression | date[:format] }}

9 个答案:

答案 0 :(得分:44)

请查看http://docs.angularjs.org/api/ng.filter:date处的文档。在那里,您将看到所需的格式:

{{date_expression | date:'MMMM'}}

答案 1 :(得分:38)

如果你有月份索引,你可以创建自己的过滤器:

myApp.filter('monthName', [function() {
    return function (monthNumber) { //1 = January
        var monthNames = [ 'January', 'February', 'March', 'April', 'May', 'June',
            'July', 'August', 'September', 'October', 'November', 'December' ];
        return monthNames[monthNumber - 1];
    }
}]);

然后在你的模板中:

{{date_expression | monthName}}

答案 2 :(得分:3)

格式字符串可以包含以下几个月的元素:

'MMMM':一年中的月份(1月至12月) - {{D_V | date:'yyyy-MMMM-dd'}}

'MMM':一年中的月份(1月至12月) - {{D_V | date:'yyyy-MMM-dd'}}

'MM':一年中的月份,填充(01-12) - {{D_V | date:'yyyy-MM-dd'}}

'M':一年中的月份(1-12) - {{D_V | date:'yyyy-M-dd'}}

了解更多信息,请访问Angular JS Date Filter

答案 3 :(得分:2)

我要理解你将月份作为整数值而不是日期对象。日期过滤器仅适用于格式化日期时间或毫秒作为字符串,毫秒作为整数或Date对象。

所以你需要将那个月的整数值转换为过滤器理解的值。您可以获取月份整数值并将其设为零索引,然后从中创建一个新的虚拟Date对象,然后对该Date应用过滤器。

控制器:

angular.module('demo', [])
  .controller('DemoCtrl', function($scope) {
      // here's the original value
      $scope.month = 0; // 0 for january, 11 for december

      // watch for changes to the value of month. turn it into a new date object that angular can bind and filter in the view
      $scope.$watch('month', function(val) {
        // note: if you are expecting the month value to be one-indexed, you'll need to subtract 1 from val to make it zero-indexed as Date expects
        $scope.date = new Date(2014, val);
      });
    });

查看:

{{ date | date:'MMMM' }}

See this example

另一种选择是直接使用$filter服务,如果您需要更直接的方法来转换价值。你做的基本上是一样的,只是在控制器中而不是在视图中格式化值。

控制器:

// Code goes here
angular.module('demo', [])
  .controller('DemoCtrl', function($scope, $filter) {
      // here's the original value
      $scope.month = 0;

      // watch for changes to the value of month, and then format it directly
      $scope.$watch('month', function(val) {
        $scope.date = $filter('date')(new Date(2014, val), 'MMMM');
      });
    });

查看:

{{ date }}

Alternate example

答案 4 :(得分:2)

真的,最简单的方法是在这里发布的另外两个答案的组合。在过滤器中使用过滤器以获取转换并在当前语言集中显示月份名称:

app.filter('monthname',['$filter',function($filter){
    return function(month) {
      return $filter("date")(new Date(0,month),'MMMM');
    }
}]);

现在您可以使用这种方式{{ 3 | monthname }}

请注意,如果不这样做,原始过滤器{{ 3 | date:'MMMM' }}将无效,因为它需要Date类型作为参数,而不是数字。

答案 5 :(得分:1)

我找到了答案。问题很简单。我们应该将mysql日期时间转换为javascript日期时间,然后才能在javascript中格式化它。

所以我的格式是:2008-04-25 00:00:00

  app.filter('format', function () {
          return function (item) {
               var t = item.split(/[- :]/);
           var d = new Date(t[0], t[1]-1, t[2], t[3], t[4], t[5]);
           var time=d.getTime();                 
                   return time;
          };
        });

我已经将mysql转换为javascript然后转换为毫秒,然后应用我的过滤器工作。这可能效率不高。它工作得很好。希望这有助于某人。

所以我的HTML:

<li  ng-repeat="x in names">
                <div class="date">
                <span class="day">{{ x.created_at | format | date:'d'}}</span>
                <span class="month">{{ x.created_at | format | date:'MMM'}}</span>
                </div>
                <p><a href="#">{{ x.study_description | makeUppercase}}</a></p>
            </li>

工作正常。 @Nishanth答案给了我不确定的。我赞成它,因为它似乎对一些人来说很好。日期格式支持也因浏览器工具而异。

答案 6 :(得分:0)

angular.module('demo', [])
  .controller('DemoCtrl', ['$scope', '$filter', 'lodash', function($scope, $filter, _) {
    $scope.monthNames = _.range(12).map(function(m) {
        return $filter("date")(new Date(0, m), 'MMMM'); }); 
    }]);

我正在使用lodash来获取0到11之间的数字范围,但您可以通过其他方式轻松获取该列表。

答案 7 :(得分:0)

在Angular的filters.js中窥视日期过滤器的源代码,我注意到Angular在$locale.DATETIME_FORMATS.MONTH中存储了月份列表。您可以使用它来制作非常有效的过滤器:

var app = angular.module("app", []); 

app.filter("month", function($locale) {
    return function(month) {
        return $locale.DATETIME_FORMATS.MONTH[month];
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
    <p ng-repeat="num in [0,1,2,3,4,5,6,7,8,9,10,11]">
       <span ng-bind="$index + 1"></span>: 
       <span ng-bind="$index | month"></span>
    </p>
</div>

或者放弃过滤器并将其放入控制器中:

var app = angular.module("app", []); 

app.controller("ctrl", function($scope, $locale) {
    $scope.months = $locale.DATETIME_FORMATS.MONTH;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
    <p ng-repeat="num in [0,1,2,3,4,5,6,7,8,9,10,11]">
       <span ng-bind="$index + 1"></span>: 
       <span ng-bind="months[$index]"></span>
    </p>
</div>

甚至作为指令。它可能有点矫枉过正,但html看起来很漂亮(对我来说):

var app = angular.module("app", []);

app.directive("month", function($locale) {
    return {
        restrict: "A",
        link: function ($scope, elem, atrs) {
            $scope.$watch(atrs.month, function(month) {
                elem.text($locale.DATETIME_FORMATS.MONTH[month]);
            });
        }
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
    <p ng-repeat="num in [0,1,2,3,4,5,6,7,8,9,10,11]">
       <span ng-bind="$index + 1"></span>: 
       <span month="$index"></span>
    </p>
</div>

答案 8 :(得分:0)

使用MM以数字

获取月份
{{message.end_date | date : "dd-MM-y"}} 

这将为您提供12-01-2017的结果