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

Asked 14/2, 2014 at 15:10 Answered 10/2, 2016 at 23:15

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?

Transfinite answered 14/2, 2014 at 15:10 Comment(4)

What's your code? What's the input, what's the output? What's the desired output? – Paralytic 14/2, 2014 at 15:15

Sorry, I was in a hurry. Added to the question @JBNizet. – Transfinite 14/2, 2014 at 16:4

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. – Gastroenteritis 14/2, 2014 at 20:48

possible duplicate of Using AngularJS date filter with UTC date – Gastroenteritis 27/2, 2014 at 15:15

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.

Gastroenteritis answered 14/2, 2014 at 17:12 Comment(2)

rather than a function in the controller, you could, as others have proposed, incorporate millisToUTCDate into a filter. – Gastroenteritis 14/2, 2014 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. – Greenwood 16/2, 2017 at 14:51

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

Equipoise answered 16/4, 2015 at 13:14 Comment(5)

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. – Steapsin 2/8, 2016 at 16:43

@user3640967 this works only for Angular 1.x, but not for Angular 2 – Equipoise 23/1, 2017 at 8: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. – Shaftesbury 17/2, 2017 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. – Equipoise 28/2, 2017 at 15:37

Also probably works for IANA timezones such as 'Europe/Berlin' – Skirr 10/9, 2020 at 9:4

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

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags