将AngularJS日期过滤器与UTC日期一起使用

73

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

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

很棒，除了someDate在UTC中，而且日期过滤器认为它在当地时间。

我怎样才能告诉Angular这someDate是UTC？

谢谢。

angularjs  datetime  angularjs-filter 
— 弗朗西斯
source
日期过滤器会自动将其转换为本地时间。
— zs2020 2013年
5
它不知道日期是UTC，所以转换是错误的。
— Francisc
— 丹尼斯Jaamann
— jberryman
1
{{someDate | 日期：'d MMMM yyyy'：'UTC'}}
— Ali786

Answers:

56

类似问题在这里

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

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

从这个答案中借用，您可以执行以下操作（即使用带有UTC构造函数创建日期的convert函数），而不需要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>

这是一个小矮人玩

另请参见this和this。

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

— 奥塞克
source
109

似乎AngularJS员工正在1.3.0版中进行开发。您需要做的就是: 'UTC'在格式字符串之后添加。就像是：

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

正如您在docs中看到的那样，您还可以在这里使用它： Plunker示例

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

— 尼尔
source
6
我认为PO想要的是将UTC日期格式化为本地格式字符串，正好相反。
— tedyyu
1
遗憾的是，Angular 2的Date管道不支持此附加时区参数。做这样的事情是什么在第一个答案建议将在2角仍在工作
— munsellj
嗨@nir这对我有用。问题：如上所述，我可以通过任何方式获得西班牙语的英语月份的月份名称。所以应该保留诸如1月，2月，3月等月份的名称……我需要将其命名为：enero，febrero，marzo？任何指针都会有所帮助。
— Nirmal
如果要将值1506508005197转换为2010年9月27日，请使用nir {{record.deactivateDate | 日期：'MM-dd-yyyy'：'UTC'}}
— Sagar S.
无论它是否回答了问题，这都是我一直在寻找的并且运行完美的工具。但是也许对其他人来说：如果您想以其他方式拥有它，只需确保后端将其发送为2018-07-17T21：26：00.000 + 00：00。然后，Angular知道这是一个UTC时间，并且默认情况下会将其正确转换为本地时间。
— CularBytes
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' }}
— 查理·马丁
source
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>
— 大孙
source
这实际上是错误的，因为它不再使用日期的UTC函数-与ossek的脚本相反。但是，如果其中的日期input末尾包含字符串“ UTC”，它将起作用。
— 约恩·伯克费尔德（JörnBerkefeld）
感谢您指出。我的回复后似乎原来的答案已经更新了：)我只是将他的函数包装到一个过滤器中。
— 孙
当我们在使用它时：我可以建议使用$locale['DATETIME_FORMATS']['medium']而不是固定的后备格式吗？这样，您就可以使用angular自己的定位。你的格式看起来非常像EN_US格式，这是非常罕见的其他地方的世界
— 约恩Berkefeld
完成！:)。模板部分保持原样，以显示可以用来替代默认格式。
— 顺
3

如果确实使用moment.js，则可以使用moment（）。utc（）函数将矩对象转换为UTC。您还可以通过使用moment（）。format（）函数在控制器内部而不是视图中处理良好的格式。例如：

moment(myDate).utc().format('MM/DD/YYYY')
— Duffcodester
source
他不想将其转换为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>
— 用户名
source
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>
展开摘要

— 水仙
source
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);

       };
    });
— 马特奥广场
source
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.