在AngularJS中格式化date时间

如何在AngularJS中正确显示date和时间?

下面的输出显示了input和输出,有和没有AngularJSdatefilter:

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 04002010-10-28 23:40:23 EST

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

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

但在你的控制器中:

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

你的代码应该像你看到这个小提琴一样工作 。

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

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

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

 {{dt | date:dateFormat }} 

我知道这是一个旧的项目,但是我认为我会考虑另一个选项。

由于原始string不包含“T”demarker,因此Angular中的默认实现不会将其识别为date。 你可以使用新的Date来强制它,但这对数组来说有点痛苦。 由于您可以将filter一起过滤,因此您可以使用filter将input转换为date,然后在转换后的date应用date:filter。 创build一个新的自定义filter如下:

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

然后在你的标记中,你可以把filter连接在一起:

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

你可以像这样获得'date'filter:

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

这将以你想要的格式给你今天的date。

这是一个filter ,将采取datestring或JavaScript的Date()对象。 它使用Moment.js ,可以应用任何Moment.js转换function,比如stream行的“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分钟前显示

如果你需要调用多个时刻的function,你可以链接它们。 这转换为UTC,然后格式…

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

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

这里有一些stream行的例子:

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

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

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

你有没有看到文档的写作指令(简短版本)部分?

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

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

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

您可以使用momentjsmomentjs中实现date – 时间filter。 例如:

 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 ""; }; }); 

date是时间戳格式。

简单地说,如果你想输出像“Jan 30,2017 4:31:20 PM”然后按照简单的步骤

step1-在js控制器中声明下面的variables

 $scope.current_time = new Date(); 

第2步 – 在HTML页面中显示

{{current_time | date: '中'}}

我们可以格式化视angular方面的date是非常容易的….请检查下面的例子:

{{dt | date:“dd-MM-yyyy”}}

我build议你使用moment.js它已经得到了很好的支持,根据地区的date格式。

创build一个内部使用moment.js方法来格式化date的filter。

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

 var formatted_datetime = $filter('date')(variable_Containing_time,'yyyy-MM-dd HH:mm:ss Z')