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

【问题标题】：How to show time with AngularJS date filter如何使用 AngularJS 日期过滤器显示时间
【发布时间】：2017-09-04 04:31:44
【问题描述】：

我想将我的时间显示为上午和下午，是否可以使用角度日期过滤器。我已经尝试了下面的代码，但对我不起作用。

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

【问题讨论】：

标签： javascript angularjs datefilter

【解决方案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

【讨论】：

@byteC0de 立即查看。

【解决方案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>

会给你所需的结果。

【讨论】：