使用带有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>