Angular 4 date pipe displays wrong date because of time zones - how to fix this?

Question

I have a date value in each of my objects that I can Print like this:

<td> {{competition.compStart }}</td> 

And here is how it looks:

1931-05-31T00:00:00.000+0000 

In order to change the format to make it more readable I'm using the Angular date pipe:

<td> {{competition.compStart | date : "dd/MM/yyyy"}}</td> 

With this result:

30/05/1931 

As you can see, It is displaying the previous day (May 30 instead of May 31).

As far as I understand, the problem is related to the timezone, since I'm in Argentina and we have GMT-3 then 00:00 of the 31st minus 3 hours would be May 30 at 9 PM.

So how can I make it take the time literally and not process it based on the timezone, but still apply the format in the pipe?

Answer 1

Behind the scenes, DatePipe uses locale to display date in user's timezone. Try with client's timezone data:

1931-05-31T00:00:00.000-0300 instead of 1931-05-31T00:00:00.000+0000.

You can get client's offset in minutes using (new Date()).getTimezoneOffset()

This is actually the known issue/limitation of DatePipe. Community is aware of it. It the future, you will be able to specify timezone as one of parameters ({{ value | date:format:zone }}).

Here is the issue on github: https://github.com/angular/angular/issues/9324

For more advanced date manipulations, I recommend moment.js (less headaches, better consistency, less testing, simpler maintaining).

EDIT: It has been added:

date_expression | date[:format[:timezone[:locale]]]

Code: https://github.com/angular/angular/blob/5.0.4/packages/common/src/pipes/date_pipe.ts#L137 Docs: https://angular.io/api/common/DatePipe

Answer 2

for angular 5 and up , you can try to add timezone in pipe,

By default it takes the local timezone of user machine

and you can specify it in minutes for example for GMT-2, timezone: '-120'

{{ competition.compStart | date: 'short' : '-120'}}