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.

Francisc
  • 77,430
  • 63
  • 180
  • 276

10 Answers10

113

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

Maroun
  • 94,125
  • 30
  • 188
  • 241
nir
  • 3,050
  • 2
  • 20
  • 19
  • 6
    I think what the PO wants is to format a UTC date to a local format string, just the opposite. – tedyyu Oct 24 '14 at 08:49
  • 1
    Sadly this additional timezone parameter is not supported in [Angular 2's Date pipe](https://angular.io/docs/ts/latest/api/common/index/DatePipe-class.html). Doing something like what is suggested in the first answer will still work in Angular 2. – munsellj Aug 02 '16 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 '17 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 '18 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 '18 at 21:26
  • {{ data.publishedDate | date: 'mediumDate':'UTC' }} – Surya R Praveen Oct 11 '22 at 12:57
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.

Community
  • 1
  • 1
ossek
  • 1,648
  • 17
  • 25
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' }}
Charlie Martin
  • 8,208
  • 3
  • 35
  • 41
4

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

Jonathan Lau
  • 101
  • 1
  • 4
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>
doublesharp
  • 26,888
  • 6
  • 52
  • 73
Dasun
  • 3,244
  • 1
  • 29
  • 40
  • 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. – Jörn Berkefeld May 06 '16 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 06 '16 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 – Jörn Berkefeld May 13 '16 at 08:37
  • done! :). Template section leaved intact to show that can use to override the default formatting. – Dasun May 14 '16 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')
duffcodester
  • 53
  • 6
  • 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 07 '16 at 08: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>
user3444999
  • 481
  • 4
  • 10
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>
Mistalis
  • 17,793
  • 13
  • 73
  • 97
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);

       };
    });
Matteo Piazza
  • 2,462
  • 7
  • 29
  • 38
-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" />
Muhammad Waqas
  • 511
  • 6
  • 9