如何使用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> 

会给你所需的结果。