在AngularJS中格式化日期时间


123

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

Answers:


63

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

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

但在您的控制器中:

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

在我的案例中,David以DD / MM / YYYY格式存储在数据库中。我将其转换为在文本框中向用户显示DD.MM.YYYY格式,或以该格式输入用户输入,并且在我的模型中更新了该格式。在将其传递给数据库之前如何进行更改。我应该如何更改
Yogesh,

120

您的代码应该可以正常运行,就像看到这种小提琴一样

不过,您必须确保自己v.Dt是一个正确的Date对象,它才能正常工作。

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

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

{{dt | date:dateFormat }}

由于格式是一种修饰选项,因此通常最好在视图上直接执行此操作。
2015年

thnkx..super ans。可以以12小时格式显示时间吗?
Vishnu Prasad

dt也可以是整数格式的unix时间戳,也可以工作
tom10271

它不需要是Date变量的类型。时间戳记也很有效
Vlad17年

59

我知道这是一个旧项目,但以为我会考虑其他选择。

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

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

然后在标记中,可以将过滤器通过管道传递到一起:

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

是的,更可靠,更有效..感谢您的分享
azhar_SE_nextbridge

56

您可以像这样获得“日期”过滤器:

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

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


大声笑,莱安德罗。我不知道它是怎么得到的。我想我在想“使用”。
CodeOverRide

49

这是一个采用日期字符串或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


这是更强大的方法!谢谢!
Modder 2015年

2
这很出色,也可以与Moment时区结合使用。例如:{{foo.created_at | 瞬间:'tz':'America / New_York'| 时刻:“格式”:“ h:mm a z”}}
戴夫·柯林斯

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


简单,优雅且准确地问了什么
Ignotus '17

15

您是否看到过文档写作指令(简短版本)部分?

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

2
我认为您的评论非常有效。学习做过滤器是AngularJS的重要组成部分。确实没有那么困难。
Spock

6

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

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

5

如果您要输出类似“ Jan 30,2017 4:31:20 PM”的内容,则请简单地执行以下步骤

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

$scope.current_time = new Date();

step2-在html页面中显示

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


5

我们可以用角度格式设置日期格式的日期非常容易....请检查以下示例:

{{dt | 日期:“ dd-MM-yyyy”}}


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

日期采用时间戳格式。


1

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

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

2
尽管此代码段可以解决问题,但提供说明确实有助于提高您的帖子质量。请记住,您将来会为读者回答这个问题,而这些人可能不知道您提出代码建议的原因。也请尽量不要在代码中加入解释性注释,这会降低代码和解释的可读性!
kayess

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.