如何在 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
【问题讨论】：
标签： javascript angularjs date datefilter
我们可以很容易地以角度格式化视图侧的日期......请查看以下示例：
{{dt |日期：“dd-MM-yyyy”}}
【讨论】：
如果您想像“2017 年 1 月 30 日下午 4:31:20”这样输出 然后按照简单的步骤进行
步骤1- 在js控制器中声明如下变量
$scope.current_time = new Date();
步骤2- 在html页面中显示
{{当前时间 |日期：'中'}}
【讨论】：
我建议你使用 moment.js，它对根据区域设置的日期格式有很好的支持。
创建一个内部使用 moment.js 方法格式化日期的过滤器。
【讨论】：
在控制器中添加$filter 依赖。
var formatted_datetime = $filter('date')(variable_Containing_time,'yyyy-MM-dd HH:mm:ss Z')
【讨论】：
这是一个filter，它将采用日期字符串或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' }}
【讨论】：
您可以使用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 "";
};
});
日期是时间戳格式。
【讨论】：
在控制器内部，可以通过注入 $filter 来过滤格式。
var date = $filter('date')(new Date(),'MMM dd, yyyy');
【讨论】：
我知道这是一件旧物品，但我想我会考虑另一种选择。
由于原始字符串不包含“T”标记，Angular 中的默认实现不会将其识别为日期。您可以使用 new Date 强制它，但这对数组来说有点麻烦。由于您可以将过滤器连接在一起，因此您可以使用过滤器将输入转换为日期，然后应用日期：过滤转换后的日期。创建一个新的自定义过滤器，如下所示：
app
.filter("asDate", function () {
return function (input) {
return new Date(input);
}
});
然后在您的标记中，您可以将过滤器连接在一起：
{{item.myDateTimeString | asDate | date:'shortDate'}}
【讨论】：
这里有几个流行的例子：
<div>{{myDate | date:'M/d/yyyy'}}</div> 7/4/2014
<div>{{myDate | date:'yyyy-MM-dd'}}</div>2014-07-04
<div>{{myDate | date:'M/d/yyyy HH:mm:ss'}}</div> 7/4/2014 12:01:59
【讨论】：
您可以像这样获得“日期”过滤器：
var today = $filter('date')(new Date(),'yyyy-MM-dd HH:mm:ss Z');
这将以您想要的格式为您提供今天的日期。
【讨论】：
您的代码应该可以正常工作，请参阅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 }}
【讨论】：
Date 类型。时间戳长也很好用
v.Dt 可能不是 Date() 对象。
见http://jsfiddle.net/southerd/xG2t8/
但在您的控制器中：
scope.v.Dt = Date.parse(scope.v.Dt);
【讨论】：
你看过documentation的Writing directives (short version)部分吗？
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';
}
【讨论】：