Best IT Recipes

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

I use a date filter to render a unix timestamp in a specific format. I noticed that the filter adds a local time zone to the output.

Is it possible to simply display the exact timestamp without adding time zone information?

Input:

talk.content.date_and_time = 1400167800

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

the code:

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

Output:

 15-5-2014 17:30 +0200

How can I conclude 15:30 instead of 17:30?

+28
angularjs datetime
Feb 14 '14 at 15:10
source share
4 answers

"Z" is what adds time zone information. As for the UTC release, this seems to be the subject of some confusion - people seem to gravitate to moment.js .

Borrowing from this answer , you can 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 plunker to play with him

See also this and.

Also note that with this method, if you use the ā€œZā€ date filter from Angular, it seems to print your local timezone offset anyway.

+23
Feb 14 '14 at 17:12
source share

Since version 1.3.0 AngularJS introduced an additional timezone filter parameter, as shown below:

 {{ date_expression | date : format : timezone}}

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

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

Since version 1.4.0-rc.0 AngularJS also supports other time zones. I have not tested all possible time zones, but here, for example, how you can get the date in standard Japanese time (JSP, GMT +9):

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

Here you can find documentation on AngularJS date filters.

NOTE: only works with Angular 1.x

Here is a working example

+68
Apr 16 '15 at 13:14
source share

The date filter always formats dates using the local time zone. You will need to write your own filter based on getUTCXxx() Date methods or in a library like moment.js .

0
Feb 14 '14 at 16:23
source share

I just used the getLocaleString () function for my application. It must adapt the time format common to the locale, so there is no +0200, etc. Of course, there will be fewer options to control the width of your string.

 var str = (new Date(1400167800)).toLocaleString();
0
Feb 10 '16 at 23:15
source share


More articles:


All Articles