如何使用AngularJS日期过滤器显示时间

尝试自定义筛选器:

:

<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

将日期格式化为日期对象、毫秒(字符串或数字)或各种ISO 8601日期时间字符串格式(例如yyyy-MM-ddTHH:MM:ss.sssZ及其较短版本,如yyyy-MM-ddTHH:mmZ、yyyy-MM-dd或YYYYMMMDDTHHMMSZ)。如果字符串输入中未指定时区,则时间被视为在本地时区中。

因此,您需要事先格式化时间字符串。例如

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