格式AngularJS中的日期时间

Question

如何在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

Answer 1

您的代码应该正常工作,因为它看到这个小提琴.

你必须确保你v.Dt是一个正确的Date对象,它可以工作.

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

或者如果dateFormat在范围内定义为dateFormat ='yyyy-MM-dd HH:mm:ss Z':

{{dt | date:dateFormat }}

Answer 2

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

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

但在你的控制器中:

scope.v.Dt = Date.parse(scope.v.Dt);

Answer 3

我知道这是一个旧项目,但我想我会考虑其他选择.

由于原始字符串不包含"T"标记,因此Angular中的默认实现不会将其识别为日期.您可以使用新的日期强制它,但这对阵列来说有点痛苦.由于您可以将过滤器组合在一起,因此您可以使用过滤器将输入转换为日期,然后在转换日期应用日期:过滤器.创建新的自定义筛选器,如下所示:

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

然后在您的标记中,您可以将过滤器组合在一起:

{{item.myDateTimeString | asDate | date:'shortDate'}}

Answer 4

你可以像这样得到'日期'过滤器:

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

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

Answer 5

这是一个过滤器,它将采用日期字符串OR 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

Answer 6

以下是几个流行的例子:

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

<div>{{myDate | date:'yyyy-MM-dd'}}</div> 2014年7月4日

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

Answer 7

您是否看过文档的Writing指令(简短版)部分？

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';
}

Answer 8

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

var date = $filter('date')(new Date(),'MMM dd, yyyy');

Answer 9

简单地说,如果你想输出像"2017年1月30日下午4:31:20",那么按照简单的步骤

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

$scope.current_time = new Date();

step2-在html页面中显示如

{{current_time | 日期: '中'}}

Answer 10

我们可以在角度非常容易地在视图侧格式化日期....请检查以下示例:

{{dt | 日期:"dd-MM-yyyy"}}