Date Pipe formatting incorrectly (showing wrong date)

[cperez87]

The Date Pipe is formatting certain dates incorrectly. It is showing the wrong date when formatted.

Steps to reproduce and a minimal demo of the problem
Create a Date for April, 1, 2004 (happens with 2000 too, but not with 2016).
Display this date using {{myDate | date}} pipe.

You can use plunker sample below
http://plnkr.co/edit/H32nNiSqxJJwQ0DvYcEm

Current behavior
For April 1, 2004. It shows the formatted date as Mar 31, 2004.

Expected/desired behavior
Formatted date as Apr 1, 2004

[CaptainCodeman]

Probably some local-time / UTC issue somewhere. It works fine from North America.

Strangely, the two dates show as having different timezones when I run it.

[cperez87]

Im on US EST.
Im seeing the following on the preview pane of the plunker sample:

Formatted: Mar 31, 2004
Actual: Thu Apr 01 2004 00:00:00 GMT-0400 (Eastern Daylight Time) 

Formatted: Apr 1, 2016
Actual: Fri Apr 01 2016 00:00:00 GMT-0400 (Eastern Daylight Time)

2000 and 2004 were leap years. Although 2016 is as well. Hence why I included these two dates.

[cperez87]

Adding 1 hour to the time returns the following:

Formatted: Apr 1, 2004
Actual: Thu Apr 01 2004 01:00:00 GMT-0400 (Eastern Daylight Time)

Hope it helps.

[CaptainCodeman]

I see this in Chrome:

Apr 1, 2004
Thu Apr 01 2004 00:00:00 GMT-0700 (MST) 
Apr 1, 2016
Fri Apr 01 2016 00:00:00 GMT-0600 (MDT)

I guess my PC isn't sure where it is so it's hedging it's bets.

[ulikoehler]

In Europe/Chrome I see this in the Plunkr:

Formatted: Apr 1, 2004
Actual: Thu Apr 01 2004 00:00:00 GMT+0200 (CEST) 

Formatted: Apr 1, 2016
Actual: Fri Apr 01 2016 00:00:00 GMT+0200 (CEST) 

Alternate with 1 extra hour
Formatted: Apr 1, 2004
Actual: Thu Apr 01 2004 01:00:00 GMT+0200 (CEST)

[oodboo]

version 2.0.0.rc.1

for format:  upddate | date:'dd-MM-yyyy' 
result is: 05/07/2016 

for format : upddate | date:'dd MMM yyyy' 
result is: May 07, 2016 

for format : upddate | date:'d/MMM/yyyy' }}
result is: May 7, 2016 

for format : upddate  | date:'MMM, dd yyyy' }}
result is: May 7, 2016 

always the same ...

[natcohen]

Works with RC2... this should be closed

[vicb]

thanks

[cperez87]

I don't believe this is fixed.

When tested in plunker Sample using the latest @angular npmcdn I still get the same issue.

Formatted: Mar 31, 2004
Actual: Thu Apr 01 2004 00:00:00 GMT-0400 (Eastern Daylight Time) 

Formatted: Apr 1, 2016
Actual: Fri Apr 01 2016 00:00:00 GMT-0400 (Eastern Daylight Time) 

Note, this is with EST. And seems to happen with some leap years.
If I change my PC's timezone to London time, it works as expected.

Formatted: Apr 1, 2004
Actual: Thu Apr 01 2004 00:00:00 GMT+0100 (GMT Daylight Time) 

Formatted: Apr 1, 2016
Actual: Fri Apr 01 2016 00:00:00 GMT+0100 (GMT Daylight Time) 

[cperez87]

Here is a jsFiddle Sample using the same April 1, 2004 with Moment.js. It formats correctly with that one (on EST)

[pkozlowski-opensource]

Here is a plunker with the latest ng version: https://plnkr.co/edit/uPUgWaDUuu2ccKkYz8yl?p=preview

Could anyone within the EST time zone confirm that this is still an issue?

[cperez87]

Yes, still a problem with EST.

Formatted: Mar 31, 2004
Actual: Thu Apr 01 2004 00:00:00 GMT-0400 (Eastern Daylight Time) 

Formatted: Apr 1, 2016
Actual: Fri Apr 01 2016 00:00:00 GMT-0400 (Eastern Daylight Time) 

Alternate with 1 extra hour
Formatted: Apr 1, 2004
Actual: Thu Apr 01 2004 01:00:00 GMT-0400 (Eastern Daylight Time)

[astrobob]

I have a problem with CEST too:
Formatted: 3 août 1955
Actual: Thu Aug 04 1955 00:00:00 GMT+0200 (CEST)

[pkozlowski-opensource]

@astrobob thnx for this reproduce, I was able to confirm in one version of Chrome (54.0.2840.14) in CEST (France):

• new Intl.DateTimeFormat('fr').format(new Date(1969, 9, 4)) gives "03/10/1969"
• new Intl.DateTimeFormat('fr').format(new Date(1970, 9, 4)) gives "04/10/1970"

So just changing a year gives you 2 different days in the output. I've tested also with FFox and gives correct answers for both cases "04/10/1969" and "04/10/1969".

I need to test with more browsers and their versions but for now it looks like a bug in at least one version of Chrome (to be confirmed).

[pkozlowski-opensource]

So, just re-tested with some more browsers and for new Intl.DateTimeFormat('fr').format(new Date(1969, 9, 4)):

• Chrome 57.0.2951.0 (Official Build) canary gives "03/10/1969" (KO)
• FFox 50.1.0 gives "04/10/1969" (OK)

Given the above I would expect it to be a bug in Chrome and as such I've reported it here: https://bugs.chromium.org/p/v8/issues/detail?id=5747

[TobiasKrogh]

@pkozlowski-opensource just stumbled upon this issue and fiddled around with it... while I can confirm your observations for new Date(1969, 9, 4) using new Intl.DateTimeFormat('fr').format(new Date(1968, 9, 4)) (one year earlier) the results are similar in Chrome and Firefox:

• Chrome 56.0.2924.87 gives "03/10/1968" (KO)
• Firefox 51.0.1 gives "03/10/1968" (KO)

[natebunney]

Maybe I am ignorant here but, if I am asking for a date to be formatted, why is it trying to adjust for time zone? It seems to me that formatting and adjusting for time zone are really two different things and should be handled separately, why does the time zone even matter to this pipe? All I expect is to get the same date out that I put in, every time.

[ocombe]

The date pipe uses intl to format date and is part of the i18n package that Angular offers, that's why it uses locale dates.

[theHellyar]

This is an issue for me as well...anyone have a work around for now?

[cperez87]

Seems to be related to Daylight Saving Changes before 2007.

This example shows all the dates that format inconsistently (based on US format) for a 10 year period starting Oct 1, 1999.
plunker sample

[cperez87]

@theHellyar
You can use Angular2-Moment to display your Dates. It seems to work correctly.

Here is a Sample

[cimframe]

OK. This is driving me nuts.

I am using Angular 4 (^4.0.0 in package.json) and am not getting correct times...

I set a date as follows:

new Date("1988-11-05T14:00:00-07:00")

and am using the date pipe to format the outout as follows:

{{contact.lastModifiedDate | date:"EEEE, MMM dd, yyyy, hh:mm a"}}

I get the following for output:
Saturday, Nov 05, 1988, 01:00 PM

The last time I checked 14:00 should be 02:00 PM

I am using Chrome as my browser. And, by the way, the same output in Edge shows as:
Saturday, Nov 05, 1988, 01:11/5/1988 1:00:00 PM PM
Why is the date showing up in the time format?? and PM PM???

Is this a bug or a warp in time??

Some further observations...

I have used several different date strings in my calls to new Date("string") to no avail. When I use the date new Date("1957-08-08 14:30") it correctly shows as 02:30 PM
Thursday, Aug 08, 1957, 02:30 PM

This is what is driving me nuts...

[ocombe]

We are completely rewriting the date pipe for angular v5, hopefully this should fix those kind of issues

[jmcclanahan]

I'd also like to add that I'm seeing a similar issue. I'm using the date pipe like so:
{{effectiveDate | date:"MM/dd/yyyy"}}
and I'm giving the pipe a unix timestamp, for example of 1456725600000.

This works fine in the timezone of the server (my timezone - CST), but anyone with a timezone to the west of my timezone will see the previous day. For example, if I give the date pipe 08/21/2017 I will see 08/21/2017, but anyone viewing my app on the west coast will see the previous day of 08/20/2017 which is not correct. This is causing me lots of calls from customers as this app is used by thousands of people a day.

[ocombe]

With the new date pipe coming in angular 5.0 you'll be able to fix the timezone to avoid this kind of issues

…

On lun. 21 août 2017 à 19:45 Jake McClanahan ***@***.***> wrote: I'd also like to add that I'm seeing a similar issue. I'm using the date pipe like so: {{effectiveDate | date:"MM/dd/yyyy"}} and I'm giving the pipe a unix timestamp, for example of 1456725600000. This works fine in the timezone of the server (my timezone - CST), but anyone with a timezone to the west of my timezone will see the previous day. For example, if I give the date pipe 08/21/2017 I will see 08/21/2017, but anyone viewing my app on the west coast will see the previous day of 08/20/2017 which is not correct. This is causing me lots of calls from customers as this app is used by thousands of people a day. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#8319 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAQMokxaNxSVgvKwr7lDi2fqmgWs1J73ks5sacIfgaJpZM4ISVaU> .

[jmcclanahan]

thanks @ocombe . Is the new date pipe in the 5.0 beta?

[ocombe]

It will be in the next one

…

On lun. 21 août 2017 à 20:53 Jake McClanahan ***@***.***> wrote: thanks @ocombe <https://github.com/ocombe> . Is the new date pipe in the 5.0 beta? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#8319 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAQMojdWW7o0hBw5QROVWeF52oAtX6bcks5sadIbgaJpZM4ISVaU> .

[burnzoire]

Why not fix it in 4 as well?

[ocombe]

Because in 4.x we defer those type of formatting to the intl api, and we don't have any control over it. To fix that we had to do a breaking change, that's why it is only available in 5.x unfortunately

[omaracrystal]

@ocombe Where can we find the solution to timezone?

[ocombe]

https://angular.io/api/common/DatePipe

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}