How to specify timezone to date filter

Question

I have this date: 1386800070703. Let's say it's UTC.
How can I tell angular what timezone it is and in what timezone I want it displayed?

I'm currently using tihs which only converts it without any timezone info:
{{1386800070703 | date:'d MMMM yyyy'}}

And would like to be able to show a timezone to the right of the date.

score 11 · Answer 1 · answered Sep 21 '14 at 19:37

11

In the next version of AngularJS (1.3.0) you can specify the timezone this way:

{{someDate | date:'d MMMM yyyy Z' : 'UTC'}}

Currently, only supports UTC, as you can see in the docs: https://code.angularjs.org/1.3.0-rc.2/docs/api/ng/filter/date

You can play with it here: Plunker example

Notice, the time zone will be shown as local-time even if specified otherwise.

answered Sep 21 '14 at 19:37

nir

3,050
2
20
19

3

why do it, and then only support UTC? wat. – FlavorScape Feb 10 '15 at 03:56
3

Since version ```1.4.0-rc.0``` AngularJS supports other timezones too. For example to get Japan Standard Time you can use following: ```{{someDate | date: 'MMM d, y H:mm:ss Z' : '+0900'}}``` – edufinn Apr 16 '15 at 12:54
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 accepted answer for this similar question](http://stackoverflow.com/a/21785593/1392763) will still work in Angular 2. – munsellj Aug 02 '16 at 16:45

parliament · Answer 2 · 2014-03-01T22:57:36.443

Here's a directive I wrote that does just that:

angular.module('CommonDirectives', []).directive('adjustTimezone', ['$filter', function ($filter) {
  return {
    restrict: 'A',
    scope: {
      adjustTimezone: '@'
    },
    link: function ($scope, element, attrs) {
      var date = new Date(attrs.adjustTimezone);

      date.setMinutes(date.getMinutes() - date.getTimezoneOffset());
      element.text($filter('date')(date, attrs.filter));
    }
  }
}]);

Here's how you use it:

<span data-adjust-timezone="{{date.MilitaryTime}}" data-filter="EEEE, MMMM d, y h:mm a"></span>

score 2 · Answer 3 · answered Dec 11 '13 at 23:10

2

Use the element Z

'Z': 4 digit (+sign) representation of the timezone offset (-1200-+1200)

{{1386800070703 | date:'d MMMM yyyy Z'}}

answered Dec 11 '13 at 23:10

zs2020

53,766
29
154
219

1

Hm, that will only print out the machine's timezone offset. What I need is for that date to be coverted to the machine's timezone. I'll probably have to write my own filter for that, right? – Francisc Dec 12 '13 at 00:43

How to specify timezone to date filter

3 Answers3