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, Feb 14 '14 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, Feb 14 '14 at 20:48
possible duplicate of [Using AngularJS date filter with UTC date](http://stackoverflow.com/questions/20662140/using-angularjs-date-filter-with-utc-date) — ossek, Feb 27 '14 at 15:15

edufinn · Answer 1 · 2017-01-23T08:38:25.167

96

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 '17 at 08:38

answered Apr 16 '15 at 13:14

edufinn

2,369
1
21
19

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
@user3640967 this works only for Angular 1.x, but not for Angular 2 – edufinn Jan 23 '17 at 08:39
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. – bharatpatel Feb 17 '17 at 14:59
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. – edufinn Feb 28 '17 at 15:37
Also probably works for IANA timezones such as `'Europe/Berlin'` – propatience Sep 10 '20 at 09:04

score 31 · Accepted Answer · edited May 23 '17 at 10: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

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.

rather than a function in the controller, you could, as others have proposed, incorporate `millisToUTCDate` into a filter. — ossek, Feb 14 '14 at 17:23
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. — Gondil, Feb 16 '17 at 14:51

score 0 · Answer 3 · answered Feb 14 '14 at 16:23

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 '14 at 16:23

JB Nizet

678,734
91
1,224
1,255

score 0 · Answer 4 · answered Feb 10 '16 at 23:15

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

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

4 Answers4

Linked