如何在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
答案 0 :(得分:117)
您的代码应该正常工作this fiddle。
您必须确保v.Dt
是适当的Date对象才能使其正常工作。
{{dt | date:'yyyy-MM-dd HH:mm:ss Z'}}
或者如果dateFormat在范围内定义为dateFormat ='yyyy-MM-dd HH:mm:ss Z':
{{dt | date:dateFormat }}
答案 1 :(得分:62)
v.Dt可能不是Date()对象。
请参阅http://jsfiddle.net/southerd/xG2t8/
但在您的控制器中:
scope.v.Dt = Date.parse(scope.v.Dt);
答案 2 :(得分:57)
我知道这是一个旧项目,但我想我还会考虑其他选项。
由于原始字符串不包括" T" demarker,Angular中的默认实现并不将其识别为日期。您可以使用新的日期强制它,但这对阵列来说有点痛苦。由于您可以将过滤器组合在一起,因此您可以使用过滤器将输入转换为日期,然后在转换日期应用日期:过滤器。创建一个新的自定义过滤器,如下所示:
app
.filter("asDate", function () {
return function (input) {
return new Date(input);
}
});
然后在您的标记中,您可以将过滤器组合在一起:
{{item.myDateTimeString | asDate | date:'shortDate'}}
答案 3 :(得分:56)
您可以获得“约会”日期'像这样过滤:
var today = $filter('date')(new Date(),'yyyy-MM-dd HH:mm:ss Z');
这将以您想要的格式为您提供今天的日期。
答案 4 :(得分:49)
这是一个filter,它将采用日期字符串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' }}
答案 5 :(得分:22)
以下是一些受欢迎的例子:
<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
答案 6 :(得分:15)
您是否看过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';
}
答案 7 :(得分:6)
在控制器内部,可以通过注入$ filter来过滤格式。
var date = $filter('date')(new Date(),'MMM dd, yyyy');
答案 8 :(得分:5)
简单地说,如果你想输出像&#34; 2017年1月30日下午4:31:20&#34; 然后按照简单的步骤
step1- 在js controller
中声明跟随变量$scope.current_time = new Date();
step2- 在html页面中显示如
{{current_time |日期:&#39;介质&#39;}}
答案 9 :(得分:5)
我们可以在角度上格式化视图侧的日期非常容易....请查看以下示例:
{{dt |日期:“dd-MM-yyyy”}}
答案 10 :(得分: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 "";
};
});
日期为时间戳格式。
答案 11 :(得分:0)
在控制器中添加$filter
依赖项。
var formatted_datetime = $filter('date')(variable_Containing_time,'yyyy-MM-dd HH:mm:ss Z')
答案 12 :(得分:0)
我建议你使用moment.js它根据语言环境对日期格式有很好的支持。
创建一个内部使用moment.js方法格式化日期的过滤器。