在 AngularJS 中格式化日期时间

如何正确显示 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 04002010-10-28 23:40:23 EST

440421 次浏览

你看过 文件编写指令(简短版)部分吗?

超文本标示语言

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

您的代码应该在看到 这把小提琴时正常工作。

但是,您必须确保您的 v.Dt是一个正确的 日期对象才能正常工作。

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

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

\{\{dt | date:dateFormat }}

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

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

而是在你的控制器里:

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

you can get the 'date' filter like this:

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

这将按照您想要的格式给出今天的日期。

我知道这是一个老项目,但认为我扔在另一个选项考虑。

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

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

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

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

下面是一个 过滤器,它接受一个日期字符串或 javascript Date ()对象。它使用 Moment.js,并且可以应用任何 Moment.js转换函数,比如流行的‘ from Now’

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

会显示 Nov 11,20142014年11月11日

\{\{ anyDateObjectOrString | moment: 'fromNow' }}

会显示 10分钟前

如果你需要调用多个矩函数,你可以链接它们。

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

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

Here are a few popular examples:

<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

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

var date = $filter('date')(new Date(),'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 formatted_datetime = $filter('date')(variable_Containing_time,'yyyy-MM-dd HH:mm:ss Z')

我建议您使用 Moment.js,它很好地支持根据区域设置日期格式。

创建一个过滤器,该过滤器内部使用 Moment.js 方法来格式化日期。

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

步骤1 - 在 js 控制器中声明以下变量

$scope.current_time = new Date();

第二步 - 显示在 html 页面

\{\{ current _ time | date: ‘ media’}}

我们可以格式化的日期在视角方面是非常容易的... 请检查下面的例子:

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