Angular: date filter adds timezone, how to output UTC?

Question

I'm using the date filter to render a unix timestamp in a certain format. I've noticed the filter adds the local timezone to the output.

Is there any way to simply output the exact timestamp, without adding any timezone information?

Input:

talk.content.date_and_time = 1400167800

(is 05 / 15 / 14 @ 3:30:00pm UTC)

Code:

{{talk.content.date_and_time*1000 | date:'dd-M-yyyy H:mm Z'}}

Output:

15-5-2014 17:30 +0200

How can I make the output 15:30 instead of 17:30?

What's your code? What's the input, what's the output? What's the desired output? — JB Nizet
– JB Nizet, Commented Feb 14, 2014 at 15:15
if you pass a raw integer number of milliseconds, the Date filter will interpret it with respect to local time still. However using the UTC constructor and passing a date or pre-empting the filter's timezone offset by adding the offset to your own millis and passing it seems to work. — ossek
– ossek, Commented Feb 14, 2014 at 20:48
possible duplicate of Using AngularJS date filter with UTC date — ossek
– ossek, Commented Feb 27, 2014 at 15:15

edufinn · Accepted Answer · 2017-01-23 08:38:25Z

97

Since version 1.3.0 AngularJS introduced extra filter parameter timezone, like following:

{{ date_expression | date : format : timezone}}

But in versions 1.3.x only supported timezone is UTC, which can be used as following:

{{ someDate | date: 'MMM d, y H:mm:ss' : 'UTC' }}

Since version 1.4.0-rc.0 AngularJS supports other timezones too. I was not testing all possible timezones, but here's for example how you can get date in Japan Standard Time (JSP, GMT +9):

{{ clock | date: 'MMM d, y H:mm:ss' : '+0900' }}

Here you can find documentation of AngularJS date filters.

NOTE: this is working only with Angular 1.x

Here's working example

edited Jan 23, 2017 at 8:38

answered Apr 16, 2015 at 13:14

edufinn

2,4471 gold badge23 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

munsellj Over a year ago

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.

edufinn Over a year ago

@user3640967 this works only for Angular 1.x, but not for Angular 2

Bharat Ranpariya Over a year ago

what to do for Angular2 (Local date to UTC), i search lot but could not reach to conclusion , so if you guide me then i will help full.

edufinn Over a year ago

For Angular2 you have to create controller or utility function to convert date to UTC and back. You can check accepted answer for example on how to do it.

propatience Over a year ago

Also probably works for IANA timezones such as 'Europe/Berlin'

Community · Accepted Answer · 2017-05-23 10:31:36Z

31

The 'Z' is what adds the timezone info. As for output UTC, that 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 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

2 Comments

ossek Over a year ago

rather than a function in the controller, you could, as others have proposed, incorporate millisToUTCDate into a filter.

Gondil Over a year ago

You can also merge this two functions into one.

var millisToUTCDate = function(millis){     var date new Date(millis);     return new Date(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(),  date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds());   };

This was helpful for me cos' I wasn't able to make filters work :/. Thanks.

JB Nizet · Accepted Answer · 2014-02-14 16:23:35Z

0

The date filter always formats the dates using the local timezone. You'll have to write your own filter, based on the getUTCXxx() methods of Date, or on a library like moment.js.

answered Feb 14, 2014 at 16:23

JB Nizet

694k94 gold badges1.3k silver badges1.3k bronze badges

Comments

rq4t · Accepted Answer · 2016-02-10 23:15:28Z

0

I just used getLocaleString() function for my application. It should adapt the timeformat common to the locale, so no +0200 etc. Ofcourse, there will be less possibility for controlling the width of your string then.

var str = (new Date(1400167800)).toLocaleString();

answered Feb 10, 2016 at 23:15

rq4t

531 silver badge6 bronze badges

Collectives™ on Stack Overflow

Angular: date filter adds timezone, how to output UTC?

4 Answers 4

5 Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related