如何使用AngularJS日期過濾器顯示時間

Question

我想將自己的時間顯示爲AM和PM，是否可以使用角度日期過濾器。我已經嘗試了下面的代碼，但不適合我。

<div>{{ '12:31:07' | date:'HH:mm' }}</div> 

Answer 1

嘗試自定義過濾器：

HTML：

<div ng-app> 
    <div ng-controller="TodoCtrl"> 
    <div>{{ '12:31:07' | time }}</div> 
    </div> 
</div> 

JS：

angular.module('myApp').filter('time', ['$filter', function ($filter) { 
    return function (input, arg) { 
     var parts = input.split(':'); 
     var date = new Date(0, 0, 0, parts[0], parts[1], parts[2]); 
     return $filter('date')(date, arg || 'mediumTime'); 
    }; 
}]); 

演示：http://jsfiddle.net/U3pVM/33868/

個

或者使用默認篩選器：

嘗試：

<div>{{ '12:31:07' | date:'mediumTime' }}</div> 

或

<div>{{ '12:31:07' | date:'shortTime' }}</div> 

你也可以嘗試'medium'或'short'日期過濾

參見：https://docs.angularjs.org/api/ng/filter/date

Answer 2

根據日期過濾器的Angular文檔，日期參數應該採用有效的格式。

日期格式化或者作爲日期對象，毫秒（字符串或數字）或各種ISO 8601時間字符串格式（例如YYYY-MM-DDTHH：MM：ss.sssZ和其較短版本等YYYY-MM-DDTHH ：mmZ，yyyy-MM-dd或yyyyMMddTHHmmssZ）。如果在字符串輸入中沒有指定時區，則認爲時間在本地時區。

因此，您需要預先格式化您的時間字符串。例如;

<div>{{ '2017-09-04T12:31:07' | date:'h:mma' }}</div> 

會給你所需的結果。