使用AngularJS日期过滤器处理UTC日期

Question

使用AngularJS日期过滤器处理UTC日期

74

我有一个以毫秒为单位的UTC日期，我将其传递给Angular的日期过滤器进行人类格式化。

{{someDate | date:'d MMMM yyyy'}}

太棒了，除了someDate是使用UTC时间，而日期过滤器将其视为本地时间。

我该如何告诉Angular someDate是UTC时间？

谢谢。

- Francisc

date 过滤器会自动将其转换为本地时间。 - zs2020

5

它不知道日期是UTC，所以转换是错误的。 - Francisc

请参见：https://dev59.com/IGIj5IYBdhLWcg3wPy8a - Dennis Jaamann

可能是Angular：日期过滤器添加时区，如何输出UTC？的重复问题。 - jberryman

1

{{someDate | date:'d MMMM yyyy' : 'UTC'}} 的程序相关内容。 - smali

10个回答

56

类似问题在这里

我会重新发布我的回答并提出合并:

输出UTC似乎是一些混淆的主题 - 人们似乎倾向于使用moment.js。

从这个答案中借鉴，您可以做类似这样的事情（即使用将日期创建为UTC构造函数的转换函数），而不使用moment.js：

控制器

var app1 = angular.module('app1',[]);

app1.controller('ctrl',['$scope',function($scope){

  var toUTCDate = function(date){
    var _utc = new Date(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(),  date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds());
    return _utc;
  };

  var millisToUTCDate = function(millis){
    return toUTCDate(new Date(millis));
  };

    $scope.toUTCDate = toUTCDate;
    $scope.millisToUTCDate = millisToUTCDate;

  }]);

模板

<html ng-app="app1">

  <head>
    <script data-require="angular.js@*" data-semver="1.2.12" src="http://code.angularjs.org/1.2.12/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div ng-controller="ctrl">
      <div>
      utc {{millisToUTCDate(1400167800) | date:'dd-M-yyyy H:mm'}}
      </div>
      <div>
      local {{1400167800 | date:'dd-M-yyyy H:mm'}}
      </div>
    </div>
  </body>

</html>

这里是 plunker，可以用它进行测试。

另请参见此处和此处。

还要注意，使用这种方法时，如果使用 Angular 的日期过滤器中的 'Z'，似乎仍会打印您本地的时区偏移量。

- ossek

11

这是一个筛选器，可以接受日期字符串或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' }}

- Charlie Martin

4

在 angular.js 存储库中，有一个错误报告 https://github.com/angular/angular.js/issues/6546#issuecomment-36721868

- Jonathan Lau

4

ossek解决方案的进化版本

自定义过滤器更加适合，您可以在项目中任何地方使用它

js文件

var myApp = angular.module('myApp',[]);

myApp.filter('utcdate', ['$filter','$locale', function($filter, $locale){

    return function (input, format) {
        if (!angular.isDefined(format)) {
            format = $locale['DATETIME_FORMATS']['medium'];
        }

        var date = new Date(input);
        var d = new Date()
        var _utc = new Date(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(),  date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds());
        return $filter('date')(_utc, format)
    };

 }]);

在模板中。

<p>This will convert UTC time to local time<p>
<span>{{dateTimeInUTC | utcdate :'MMM d, y h:mm:ss a'}}</span>

- Dasun

这实际上是错误的，因为它不再使用日期的UTC函数 - 与ossek的脚本相反。但是，如果input中的日期末尾包含字符串" UTC"，则它仍然可以工作。 - Jörn Berkefeld

谢谢指出。看起来我的回复后原始答案已经更新了 :) 我只是把他的函数包装成一个过滤器。 - Dasun

顺便提一下：我可以建议使用 $locale['DATETIME_FORMATS']['medium'] 而不是固定的备用格式吗？这样你就可以使用 Angular 自己的本地化了。你的格式看起来非常像 en_US 格式，在世界其他地方都很不常见。 - Jörn Berkefeld

完成！：）保留模板部分以示可以用来覆盖默认格式。 - Dasun

3

如果你使用moment.js，你可以使用moment().utc()函数将moment对象转换为UTC时间。你也可以在控制器内使用moment().format()函数来处理一个漂亮的格式，而不是在视图中处理。例如：

moment(myDate).utc().format('MM/DD/YYYY')

- duffcodester

他不想将它转换为UTC时间，因为它已经是UTC时间。您应该像这样使用： moment().utc(myDate).format('MM/DD/YYYY') - nir

2

经过一些研究，我找到了一个很好的解决方案，可以将UTC转换为本地时间，请查看这个代码片段。希望它能够有所帮助。

https://jsfiddle.net/way2ajay19/2kramzng/20/

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app ng-controller="MyCtrl">
  {{date | date:'yyyy-mm-dd hh:mm:ss' }}
</div>


<script>
function MyCtrl($scope) {
 $scope.d = "2017-07-21 19:47:00";
  $scope.d = $scope.d.replace(" ", 'T') + 'Z';
  $scope.date = new Date($scope.d);
}
</script>

- user3444999

1

您还可以编写自定义过滤器来显示UTC格式的日期。请注意，我使用了 toUTCString()。

var app = angular.module('myApp', []);

app.controller('dateCtrl', function($scope) {
    $scope.today = new Date();
});
    
app.filter('utcDate', function() {
    return function(input) {
       return input.toUTCString();
    };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
  
<div ng-app="myApp" ng-controller="dateCtrl">      
    Today is {{today | utcDate}}       
</div>

- Mistalis

0

声明过滤器的方式是否可行？

   app.filter('dateUTC', function ($filter) {

       return function (input, format) {
           if (!angular.isDefined(format)) {
               format = 'dd/MM/yyyy';
           }

           var date = new Date(input);

           return $filter('date')(date.toISOString().slice(0, 23), format);

       };
    });

- Matteo Piazza

-2

如果您正在使用 .Net 进行工作，则需要在 web.config 文件中添加以下内容：

<system.web>

将解决您的问题：

<globalization culture="auto:en-US" uiCulture="auto:en-US" />

- Muhammad Waqas

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- nir · Accepted Answer

114

看起来 AngularJS 的开发人员正在1.3.0版本中处理它。您需要做的就是在格式字符串后面添加: 'UTC'。类似于：

{{someDate | date:'d MMMM yyyy' : 'UTC'}}

如您在文档中所见，您还可以在此处进行尝试： Plunker示例

顺便提一下，我认为Z参数存在错误，即使使用“UTC”，它仍然显示本地时区。

- nir

6

我认为PO想要将一个UTC日期格式化为本地格式的字符串，正好相反。 - tedyyu

1

遗憾的是，Angular 2的Date管道不支持这个额外的时区参数。但像第一个答案中建议的那样做仍然可以在Angular 2中使用。 - munsellj

嗨@nir，这对我有用。问题：我能以西班牙语获取月份名称吗？因为它在上面给出的是英文。所以，我需要将月份名称如January、February、March等更改为enero、febrero、marzo等。任何指针都会有所帮助。 - Nirmal

如果您想将值1506508005197转换为09-27-2010，则可以使用nir提供的上述建议方法。{{record.deactivateDate | date:'MM-dd-yyyy' : 'UTC'}} - Sagar S.

无论它是否回答了问题，这正是我所寻找的并且完美地运作。但也许对于其他人来说：如果你想要相反的方式，你只需要确保你的后端将它作为2018-07-17T21:26:00.000+00:00发送。Angular会知道这是一个UTC时间，并默认正确地转换成本地时间。 - CularBytes

{{data.publishedDate | date:'mediumDate':'UTC'}} 的翻译是： - Surya R Praveen