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?
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