Search code examples
angularjsdatetimeangularjs-filter

Using AngularJS date filter with UTC date


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.


Solution

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