使用 AngularJS 日期过滤器和 UTC 日期

Posted 2023-02-27

技术标签:

【中文标题】使用 AngularJS 日期过滤器和 UTC 日期【英文标题】：Using AngularJS date filter with UTC date 【发布时间】：2014-01-06 20:48:42 【问题描述】：

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

someDate | date:'d MMMM yyyy'

太棒了，除了 someDate 是 UTC 并且日期过滤器认为它是本地时间。

我如何告诉 Angular someDate 是 UTC？

谢谢。

【问题讨论】：

date 过滤器自动将其转换为当地时间。不知道日期是UTC所以转换错误。 @see ***.com/questions/20470139/… Angular: date filter adds timezone, how to output UTC?的可能重复 someDate |日期：'d MMMM yyyy'：'UTC' 【参考方案1】：

似乎 AngularJS 的人正在 1.3.0 版本中开发它。您需要做的就是在格式字符串后添加: 'UTC'。比如：

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

正如您在docs 中看到的那样，您也可以在这里玩它： Plunker example

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

【讨论】：

我认为 PO 想要的是将 UTC 日期格式化为本地格式字符串，正好相反。遗憾的是，Angular 2's Date pipe 不支持这个额外的时区参数。执行第一个答案中建议的操作在 Angular 2 中仍然有效。嗨@nir 这对我有用。问题：我可以通过任何方式获得西班牙语的月份名称，而不是上面给出的英语。所以没有像一月、二月、三月等月份的名称，我需要将它们设为：enero、febrero、marzo？任何指针都会有所帮助。如果您想将值 1506508005197 转换为 2010 年 9 月 27 日，请使用上述 nir record.deactivateDate |日期：'MM-dd-yyyy'：'UTC' 无论它是否回答了这个问题，这就是我一直在寻找的并且可以完美运行。但也许对其他人来说：如果您想以相反的方式使用它，您只需确保您的后端将其发送为 2018-07-17T21:26:00.000+00:00。然后 Angular 知道它是 UTC 时间，默认情况下会将其正确转换为本地时间。【参考方案2】：

类似问题here

我将重新发布我的回复并提出合并：

输出 UTC 似乎是一些混乱的主题——人们似乎倾向于moment.js。

从这个answer 中借用，你可以在没有moment.js 的情况下做这样的事情（即使用一个转换函数来创建带有UTC 构造函数的日期）：

控制器

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 玩它

另请参阅 this 和 this。

另请注意，使用此方法，如果您使用 Angular 日期过滤器中的“Z”，它似乎仍会打印您的本地时区偏移量。

【讨论】：

【参考方案3】：

这是一个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'

【讨论】：

【参考方案4】：

在 angular.js 存储库中有一个针对此问题的错误 https://github.com/angular/angular.js/issues/6546#issuecomment-36721868

【讨论】：

【参考方案5】：

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>

【讨论】：

这实际上是错误的，因为它不再使用日期的 UTC 函数 - 与 ossek 的脚本相反。但是，如果input 中的日期在末尾包含字符串“UTC”，它会起作用。感谢您的指出。在我回复后似乎原始答案已更新:)我只是将他的功能包装到一个过滤器中。当我们这样做的时候：我可以建议使用$locale['DATETIME_FORMATS']['medium'] 而不是固定的后备格式吗？这样你就可以使用 Angular 自己的本地化。您的格式看起来非常像 en_US 格式，这在世界其他地方非常罕见完成！ :)。模板部分保持不变以显示可用于覆盖默认格式。【参考方案6】：

如果您使用 moment.js，您将使用 moment().utc() 函数将 moment 对象转换为 UTC。您还可以使用 moment().format() 函数在控制器而不是视图中处理一个很好的格式。例如：

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

【讨论】：

他不想将其转换为 UTC，因为它已经是 UTC 时间了。你应该像这样使用它：moment().utc(myDate).format('MM/DD/YYYY')【参考方案7】：

经过一些研究，我找到了一个将 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>

【讨论】：

【参考方案8】：

您还可以为您的日期编写一个自定义过滤器，以 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>

【讨论】：

【参考方案9】：

可以通过以下方式声明过滤器吗？

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

       ;
    );

【讨论】：

【参考方案10】：

如果你在 .Net 中工作，那么在 web.config 里面添加以下内容

<system.web>

将解决您的问题：

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

【讨论】：

以上是关于使用 AngularJS 日期过滤器和 UTC 日期的主要内容，如果未能解决你的问题，请参考以下文章

AngularJS 自定义过滤器不适用于 iOS 和 IE

angularjs 过滤器“日期”和 $locale 服务

如何使用js将UTC日期转换为本地时间？ [复制]

使用 Joda-Time 获取给定日期和时区的 UTC 偏移量

javascript 不能正确地将 angular ui datepicker 日期转换为 UTC

ngmodel 更改时未触发角度日期过滤器