使用带有UTCdate的AngularJSdatefilter

我有一个以毫秒为单位的UTCdate,我将它传递给Angular的datefilter来进行人类格式化。

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

真棒,除了someDate是UTC,datefilter认为它是在当地时间。

如何告诉Angular someDate是UTC?

谢谢。

类似问题在这里

我会重发我的回应,并提出合并:

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

从这个答案借用,你可以做这样的事情(即使用转换函数,创build与UTC构造函数的date)没有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> 

这里的蹦极玩它

另见这个和这个 。

另外请注意,使用这种方法,如果您使用Angular的datefilter中的“Z”,它似乎仍然会打印您当地的时区偏移量。

看起来像AngularJS的人正在1.3.0版本中工作。 所有你需要做的是在格式string后面加上: 'UTC' 。 就像是:

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

正如你在文档中看到的,你也可以在这里玩: Plunker例子

顺便说一句,我认为有一个错误的Z参数,因为它仍然显示本地时区即使“UTC”。

这是一个filter ,将采取datestring或JavaScript的Date()对象。 它使用Moment.js ,可以应用任何Moment.js转换function,比如stream行的“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分钟前显示

如果你需要调用多个时刻的function,你可以链接它们。 这转换为UTC,然后格式…

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

在angular.js回购中存在一个错误提交https://github.com/angular/angular.js/issues/6546#issuecomment-36721868

如果你确实使用了moment.js,你可以使用moment()。utc()函数将时刻对象转换为UTC。 你也可以通过使用moment()。format()函数来处理控制器内部的一个很好的格式,而不是视图。 例如:

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

ossek解决scheme的演进版本

自定义filter更合适,那么你可以在项目的任何地方使用它

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, yh:mm:ss a'}}</span> 

它可以按照以下方式声明filter吗?

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

您还可以为date编写自定义filter,并以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> 

经过一番研究,我find了一个将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>