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?
for angular 5 and up you try 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'
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 of1931-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