AngularJs：顯示月份編號的月份名稱

Question

我將月份編號爲（1,2,3，...）並希望顯示相應的名稱。 我該怎麼做？

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

Answer 1

請看看文檔在http://docs.angularjs.org/api/ng.filter:date。在那裏你會看到所需的格式：

{{date_expression | date:'MMMM'}} 

Answer 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

Answer 3

如果你有一個月的索引，你可以只創建自己的過濾器：

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

Answer 4

我找到了答案。問題很簡單。我們應該將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和然後到毫秒然後施加我的濾波器其working.This可以是效率不高。它的工作非常好。希望這可以幫助某人。

所以我的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的答案是給我未定義的。自從它對一些人看起來工作正常以來，我已經投了贊成票。日期格式支持也因瀏覽器工具而異。

Answer 5

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，但你可以很容易地得到該列表中的一些其他方式。

Answer 6

確實，最簡單的方法是在這裏發佈的兩個其他答案的組合。在過濾器使用過濾器在當前的語言設置，以獲得轉換和顯示的月份名稱：

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

現在你可以使用這種方式{{ 3 | monthname }}

注意，如果沒有這個，原來的過濾器{{ 3 | date:'MMMM' }}不會因爲它預計工作Date類型作爲參數，而不是數字。

Answer 7

格式字符串可以幾個月由下列元素：

「MMMM」：本月年（一月至十二月） - {{D_V | date:'yyyy-MMMM-dd'}}

「MMM」：本月年（一月至十二月） - {{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

Answer 8

偷看角的filters.js內的日期過濾器的源代碼，我注意到，角門店個月的$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>

Answer 9

使用MM拿到當月數字

{{message.end_date | date : "dd-MM-y"}} 

這會給你的結果as 12-01-2017