74

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.

5

10 Answers 10

114

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'.

6
  • 6
    I think what the PO wants is to format a UTC date to a local format string, just the opposite.
    – tedyyu
    Oct 24, 2014 at 8:49
  • 1
    Sadly this additional timezone parameter is not supported in Angular 2's Date pipe. Doing something like what is suggested in the first answer will still work in Angular 2.
    – munsellj
    Aug 2, 2016 at 16:43
  • Hi @nir This works for me. question: any way I can get the Month names in Spanish instaed of English as it gives in above. so instaed of the month names like January, February, March...etc I need to make those as: enero, febrero, marzo? Any pointers would help.
    – Nirmal
    Aug 30, 2017 at 14:16
  • If you want to convert value 1506508005197 to 09-27-2010 then use above suggested method by nir {{record.deactivateDate | date:'MM-dd-yyyy' : 'UTC'}}
    – Sagar S.
    Jan 12, 2018 at 12:25
  • Whatever or not it answers the question, this is what I was looking for and works perfectly. But maybe for others: If you want to have it the other way around you just have to make sure your back-end is sending it as 2018-07-17T21:26:00.000+00:00. Angular then knows it is an UTC time and will convert it correctly to local time by default.
    – CularBytes
    Jul 17, 2018 at 21:26
56

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

See also this and this.

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.

0
11

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' }}
4

There is a bug filed against this in angular.js repo https://github.com/angular/angular.js/issues/6546#issuecomment-36721868

0
4

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>
4
  • this is actually wrong because it no longer uses date's UTC functions - contrary to ossek's script. it would work though, if the date in input included the string " UTC" at the end. May 6, 2016 at 11:26
  • Thanks for pointing out. It seems original answer has been updated after my reply :) I just wrapped his function in to a filter.
    – Dasun
    May 6, 2016 at 12:48
  • while we are at it: might i suggest using $locale['DATETIME_FORMATS']['medium'] instead of the fixed fallback format? that way you use angular's own localization. Your format looks awfully like the en_US format, that is very uncommon everywhere else in the world May 13, 2016 at 8:37
  • done! :). Template section leaved intact to show that can use to override the default formatting.
    – Dasun
    May 14, 2016 at 19:31
3

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')
1
  • He doesn't want converting it to UTC, since it is already in UTC time. You should use it like this: moment().utc(myDate).format('MM/DD/YYYY')
    – nir
    Jun 7, 2016 at 8:53
2

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>
1

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>

0

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

       };
    });
-2

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" />

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.