AngularJS date filter incorrect time

Question

I have a date object formatted to isotime. I'm using the |date filter to nicely format this in my template, but it incorrectly changing the time.

This Code...

    <td>[[ user.last_online | date:'dd MMM yyyy - hh:mm a' ]]</td>
    <td>[[ user.last_online ]]</td>

Results in this...

enter image description here

Now I know that the 1 hour difference is because of the Timezone, this is what I'm expecting. The Minutes however is incorrect.

In the first row, 13 minutes gets added when the filter is applied. In the second row, 5 minutes gets added.

Not only are these two values wrong, but they are also inconsistent.

I can't reproduce the problem. See this simple Fiddle. What's the javascript value (console.log) of user.last_online ? — Blackhole
– Blackhole, Commented Aug 9, 2013 at 14:14
The 2nd column is the exact value for last_online, and is the isoformat() result returned by python's datetime module — Andre
– Andre, Commented Aug 9, 2013 at 14:49

zs2020 · Accepted Answer · 2013-08-28 13:28:55Z

4

If you check ISO8601, you can see the correct time stamp format is

yyyy-MM-ddTHH:mm:ss.SSSZ

The milliseconds should consists of 3 digits. I did a simple test and you can see after correcting the milliseconds part, the dates will be rendered correctly.

{{"2013-08-09T15:36:31.764546+02:00" | date:'dd MMM yyyy - hh:mm a'}}<br />
{{"2013-08-09T15:34:14.318753+02:00" | date:'dd MMM yyyy - hh:mm a'}}<br />
{{"2013-08-09T15:36:31.764+02:00" | date:'dd MMM yyyy - hh:mm a'}}<br />
{{"2013-08-09T15:34:14.318+02:00" | date:'dd MMM yyyy - hh:mm a'}}<br />

The result is

09 Aug 2013 - 09:49 AM
09 Aug 2013 - 09:39 AM
09 Aug 2013 - 09:36 AM
09 Aug 2013 - 09:34 AM

Demo

Update

Python's datetime.isoformat() return the time with microseconds 0 <= microsecond < 1000000. Angularjs doesn't like, though this format is correct according to ISO8601, since ISO8601 only requires one or more digits representing a decimal fraction of a second

So I guess you can use strftime to format it.

edited Aug 28, 2013 at 13:28

answered Aug 9, 2013 at 14:18

zs2020

54.7k30 gold badges157 silver badges223 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Andre Over a year ago

This does indeed look like it's the problem. I am however using pythons datetime.isoformat() to get that format and it returns it as you see in the 2nd column.

Andre Over a year ago

looks like I'll have to format the result from that method to drop the extra digits in the miliseconds.

Matt Johnson-Pint Over a year ago

@sza - The number of decimals in ISO8601 is variable. It's just a bug in Angular. See my answer.

zs2020 Over a year ago

@MattJohnson Thanks! Hopefully they can get this fixed ASAP. But in the meantime, this should be an alternative.

Andre Over a year ago

I'm going to mark this one as the solution, since this did fix the problem. However, as @MattJohnson pointed out in his answer, the real issue is a bug within the angular version I'm using.

EpokK · Accepted Answer · 2013-08-09 14:23:52Z

2

I think the value of user.last_online is incorrect or has a bad format. If you check ISO8601, you can see the correct time stamp format is:

yyyy-MM-ddTHH:mm:ss.SSSZ

My plunker

edited Aug 9, 2013 at 14:23

answered Aug 9, 2013 at 14:18

EpokK

38.1k9 gold badges63 silver badges69 bronze badges

1 Comment

Matt Johnson-Pint Over a year ago

The number of decimals in ISO8601 is variable. It's just a bug in Angular. See my answer.

Matt Johnson-Pint · Accepted Answer · 2013-08-09 16:14:03Z

1

Your dates are correctly formatted. ISO8601 doesn't actually require any particular number of decimals. There could be anywhere from zero to 7 decimals or more. If you look at an actual copy of the ISO8601 spec, section 4.2.2.4 says the following:

... with as many digits as necessary following the decimal sign ...

There are a few older browsers where this mattered when passed directly to the new Date() constructor, but AFAIK those were consider bugs and were fixed.

You are experiencing a bug in AngularJS, which was fixed in version 1.1.5. You can find it referenced in their change log as follows:

date filter: correctly format dates with more than 3 sub-second digits (4f2e3606)

edited Aug 9, 2013 at 16:14

answered Aug 9, 2013 at 15:46

Matt Johnson-Pint

244k75 gold badges468 silver badges621 bronze badges

Collectives™ on Stack Overflow

AngularJS date filter incorrect time

3 Answers 3

5 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related