Using AngularJS date filter with UTC date
AngularjsDatetimeAngularjs FilterAngularjs Problem Overview
I have an UTC date in milliseconds which I am passing to Angular's date filter for human formatting.
{{someDate | date:'d MMMM yyyy'}}
Awesome, except someDate is in UTC and the date filter considers it to be in local time.
How can I tell Angular that someDate is UTC?
Thank you.
Angularjs Solutions
Solution 1 - Angularjs
Seems like AngularJS folks are working on it in version 1.3.0.
All you need to do is adding : 'UTC' after the format string. Something like:
{{someDate | date:'d MMMM yyyy' : 'UTC'}}
As you can see in the docs, you can also play with it here: Plunker example
BTW, I think there is a bug with the Z parameter, since it still show local timezone even with 'UTC'.
Solution 2 - Angularjs
Similar Question here
I'll repost my response and propose a merge:
Output UTC seems to be the subject of some confusion -- people seem to gravitate toward moment.js.
Borrowing from this answer, you could do something like this (i.e. use a convert function that creates the date with the UTC constructor) without moment.js:
controller
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;
}]);
template
<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>
here's plunker to play with it
Also note that with this method, if you use the 'Z' from Angular's date filter, it seems it will still print your local timezone offset.
Solution 3 - Angularjs
Here is a filter that will take a date string OR javascript Date() object. It uses Moment.js and can apply any Moment.js transform function, such as the popular '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);
};
});
So...
{{ anyDateObjectOrString | moment: 'format': 'MMM DD, YYYY' }}
would display Nov 11, 2014
{{ anyDateObjectOrString | moment: 'fromNow' }}
would display 10 minutes ago
If you need to call multiple moment functions, you can chain them. This converts to UTC and then formats...
{{ someDate | moment: 'utc' | moment: 'format': 'MMM DD, YYYY' }}
Solution 4 - Angularjs
There is a bug filed against this in angular.js repo https://github.com/angular/angular.js/issues/6546#issuecomment-36721868
Solution 5 - Angularjs
An evolved version of ossek solution
Custom filter is more appropriate, then you can use it anywhere in the project
js file
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)
};
}]);
in template
<p>This will convert UTC time to local time<p>
<span>{{dateTimeInUTC | utcdate :'MMM d, y h:mm:ss a'}}</span>
Solution 6 - Angularjs
If you do use moment.js you would use the moment().utc() function to convert a moment object to UTC. You can also handle a nice format inside the controller instead of the view by using the moment().format() function. For example:
moment(myDate).utc().format('MM/DD/YYYY')
Solution 7 - Angularjs
After some research I was able to find a good solution for converting UTC to local time, have a a look at the fiddle. Hope it help
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>
Solution 8 - Angularjs
You have also the possibility to write a custom filter for your date, that display it in UTC format. Note that I used 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>
Solution 9 - Angularjs
Could it work declaring the filter the following way?
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);
};
});
Solution 10 - Angularjs
If you are working in .Net then adding following in web.config inside
<system.web>
will solve your issue:
<globalization culture="auto:en-US" uiCulture="auto:en-US" />