Using AngularJS Date / Time Filter with UTC Date

Question

Using AngularJS Date / Time Filter with UTC Date

I have a UTC date in milliseconds that I pass to the Angular date filter to format the person.

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

It's awful, except someDate is in UTC, and the date filter considers this local.

How can I tell Angular that someDate is UTC?

Thank.

+69

angularjs datetime angularjs-filter

Francisc Dec 18 '13 at 15:31

source share

10 answers

It seems that AngularJS people are working on it in version 1.3.0. All you have to do is add : 'UTC' after the format string. Something like:

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

As you can see in the docs , you can also play here: An example of a plunger

By the way, I think there is an error with the Z parameter, since it still shows the local time zone even with "UTC".

+98

nir Sep 21 '14 at 19:25

source share

Here is a filter that will take a date string OR a javascript Date () object. It uses Moment.js and can use any Moment.js conversion functions, 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' }}

appears on November 11, 2014

 {{ anyDateObjectOrString | moment: 'fromNow' }}

displayed 10 minutes ago

If you need to call several functions of the moment, you can link them. This converts to UTC and then formats ...

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

+11

Charlie Martin Nov 12 '14 at 23:12

source share

There is an error related to this in angular.js repo https://github.com/angular/angular.js/issues/6546#issuecomment-36721868

+4

Jonathan Lau May 09 '14 at 19:21

source share

If you use moment.js, you should use the moment () function. utc () to convert the moment object to UTC. You can also handle a good format inside the controller instead of the view using the moment () function. Format (). For example:

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

+3

duffcodester Sep 02 '14 at 1:20

source share

Developed version of ossek solution

A custom filter is more suitable, 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 the template

 <p>This will convert UTC time to local time<p> <span>{{dateTimeInUTC | utcdate :'MMM d, yh:mm:ss a'}}</span>

+3

Dasun Aug 13 '15 at 20:14

source share

After some research, I was able to find a good solution to convert UTC to local time, take a look at the fiddle. Hope this helps.

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>

+1

user3444999 Jul 24 '17 at 19:27

source share

Could this work by declaring the filter as follows?

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

0

Matteo Piazza Mar 22 '16 at 11:01

source share

You also have the option of writing a custom filter for your date that displays it in UTC. 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>

0

Mistalis Apr 27 '17 at 11:48 on

source share

If you are working in .Net, then add the following to web.config inside

 <system.web>

will solve your problem:

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

0

Muhammad Waqas Jan 28 '19 at 19:50

source share

ossek · Accepted Answer · 2014-02-14 17:19

Similar question here

I will rewrite my answer and suggest a union:

The release of UTC seems to be the subject of some confusion - people seem to gravitate to the moment .

Borrowing from this answer , you can do something like this (i.e. use the convert function, which creates the date using 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 is the plunker to play with him

Using AngularJS Date / Time Filter with UTC Date

More articles: