125

如何在 AngularJS 中正确显示日期和时间？

下面的输出显示了输入和输出，有和没有 AngularJS 日期过滤器：

In: {{v.Dt}}  
AngularJS: {{v.Dt | date:'yyyy-MM-dd HH:mm:ss Z'}}

这打印：

In: 2012-10-16T17:57:28.556094Z 
AngularJS: 2012-10-16T17:57:28.556094Z

所需的显示格式是 2010-10-28 23:40:23 0400或2010-10-28 23:40:23 EST

4

13 回答 13

122

Your code should work as you have it see this fiddle.

You'll have to make sure your v.Dt is a proper Date object for it to work though.

{{dt | date:'yyyy-MM-dd HH:mm:ss Z'}}

or if dateFormat is defined in scope as dateFormat = 'yyyy-MM-dd HH:mm:ss Z':

{{dt | date:dateFormat }}
于 2012-10-16T18:20:14.393 回答
63

v.Dt 可能不是 Date() 对象。

见http://jsfiddle.net/southerd/xG2t8/

但在你的控制器中：

scope.v.Dt = Date.parse(scope.v.Dt);
于 2012-10-16T18:27:02.640 回答
60

我知道这是一件旧物品，但我想我会考虑另一种选择。

由于原始字符串不包含“T”标记，Angular 中的默认实现不会将其识别为日期。您可以使用 new Date 强制它，但这对数组来说有点麻烦。由于您可以将过滤器连接在一起，因此您可以使用过滤器将输入转换为日期，然后应用日期：过滤转换后的日期。创建一个新的自定义过滤器，如下所示：

app
.filter("asDate", function () {
    return function (input) {
        return new Date(input);
    }
});

然后在您的标记中，您可以将过滤器连接在一起：

{{item.myDateTimeString | asDate | date:'shortDate'}}
于 2014-05-05T18:32:18.960 回答
56

您可以像这样获得“日期”过滤器：

var today = $filter('date')(new Date(),'yyyy-MM-dd HH:mm:ss Z');

这将以您想要的格式为您提供今天的日期。

于 2014-04-11T16:44:32.743 回答
49

这是一个过滤器，它将采用日期字符串或 javascript Date() 对象。它使用Moment.js并且可以应用任何Moment.js转换函数，例如流行的“fromNow”

angular.module('myModule').filter('moment', function () {
  return function (input, momentFn /*, param1, param2, ...param n */) {
    var args = Array.prototype.slice.call(arguments, 2),
        momentObj = moment(input);
    return momentObj[momentFn].apply(momentObj, args);
  };
});

所以...

{{ anyDateObjectOrString | moment: 'format': 'MMM DD, YYYY' }}

将显示2014 年 11 月 11 日

{{ anyDateObjectOrString | moment: 'fromNow' }}

将显示10 分钟前

如果您需要调用多个矩函数，您可以将它们链接起来。这将转换为 UTC，然后格式化...

{{ someDate | moment: 'utc' | moment: 'format': 'MMM DD, YYYY' }}

https://gist.github.com/cmmartin/341b017194bac09ffa1a

于 2014-11-11T05:16:03.323 回答
23

以下是一些流行的例子：

<div>{{myDate | date:'M/d/yyyy'}}</div> 2014 年 7 月 4 日

<div>{{myDate | date:'yyyy-MM-dd'}}</div> 2014-07-04

<div>{{myDate | date:'M/d/yyyy HH:mm:ss'}}</div> 2014 年 7 月 4 日 12:01:59

于 2015-04-29T12:26:08.527 回答
15

Have you seen the Writing directives (short version) section of the documentation?

HTML

<div ng-controller="Ctrl2">
      Date format: <input ng-model="format"> <hr/>
      Current time is: <span my-current-time="format"></span>
</div>

JS

function Ctrl2($scope) {
  $scope.format = 'M/d/yy h:mm:ss a';
}
于 2012-10-16T18:19:26.260 回答
6

在控制器内部，可以通过注入 $filter 来过滤格式。

var date = $filter('date')(new Date(),'MMM dd, yyyy');
于 2015-06-05T03:25:24.763 回答
5

我们可以用角度格式化视图侧的日期非常容易....请查看以下示例：

{{dt | 日期：“dd-MM-yyyy”}}

于 2017-04-17T07:20:11.450 回答
5

简单地说，如果你想像“2017 年 1 月 30 日 4:31:20 PM”这样输出，那么按照简单的步骤

step1- 在 js 控制器中声明以下变量

$scope.current_time = new Date();

step2-在html页面中显示

{{当前时间 | 日期：'中'}}

于 2017-01-30T11:05:20.760 回答
3

您可以使用momentjs在 angularjs 中实现日期时间过滤器。例如：

angular.module('myApp')
 .filter('formatDateTime', function ($filter) {
    return function (date, format) {
        if (date) {
            return moment(Number(date)).format(format || "DD/MM/YYYY h:mm A");
        }
        else
            return "";
    };
});

其中日期为时间戳格式。

于 2015-07-28T05:21:03.237 回答
1

在控制器中添加$filter依赖项。

var formatted_datetime = $filter('date')(variable_Containing_time,'yyyy-MM-dd HH:mm:ss Z')
于 2016-11-22T09:44:05.487 回答
0

我建议你使用 moment.js，它对根据语言环境的日期格式有很好的支持。

创建一个内部使用 moment.js 方法格式化日期的过滤器。

于 2017-01-11T03:51:40.940 回答