[Safari only] Invalid argument for pipe 'DatePipe' - Safari cannot parse Date offsets

I'm submitting a ...

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

Error shows up, only on Safari (Version 10.0 (11602.1.50.0.10))

Expected behavior

Expected no error to show up. Google Chrome works fine

Minimal reproduction of the problem with instructions

Go to the following Plunkr with Safari and Google Chrome. Chrome works perfectly.

Plunkr: https://plnkr.co/edit/8ieBbla6Pk3jFQKkHsNc?p=preview

What is the motivation / use case for changing the behaviour?

So it works on Safari as well as Chrome

Please tell us about your environment:

Max OS X El Capitan 10.11.6

Angular version: 2.0.0
Browser: Chrome Latest, Safari 10.0 (11602.1.50.0.10), iOS Safari
Language: TypeScript 2.0.2

Please provide the repro as a plunker and make sure the issue is not already reported.

https://plnkr.co/edit/8ieBbla6Pk3jFQKkHsNc?p=preview

Here is the Plunkr. I've updated the original post too

Try this on Google Chrome and then try this on Safari

Mac OS X El Capitan

I have found out the cause:

// Does not work IN SAFARI
date: string = '2016-01-20T19:00:00+0000';

// Works IN SAFARI
date: string = '2016-01-20T19:00:00';

Both work in Google Chrome of course.

Here is the line in the angular source:

https://github.com/angular/angular/blob/master/modules/%40angular/common/src/pipes/date_pipe.ts#L109

I have a strong feeling it is somewhat related to this:

http://stackoverflow.com/questions/6427204/date-parsing-in-javascript-is-different-between-safari-and-chrome

pushtell/react-bootstrap-date-picker#2

any plans to fix this?

fix(common): DatePipe parses input string if it's not a valid date in…

This will work as a temporary solution. Of course, you can replace the replaced string value with what you require, e.g. hyphen instead of comma.

    formatDate(obj) {
        return obj.toString().replace(/,/g, "/");
    }

Then use it like this:

{{ formatDate(myDateObject) }}

fix(common): DatePipe parses input string if it's not a valid date in…

It's still a bug in safari when you have date like that: 2017-11-02 00:00:00.000

edit: '2017-11-02 00:00:00.000'.replace(/\s/g, "T") this work's in Safari and Chrome.

Sadly this is still there for spaces. Easier if you are working with mongodb where date is stored in ISO 8601 format.

@michaell94 well, event if i have 2017-11-02 00:00:00 date i get an error:

ERROR: ERROR Error: InvalidPipeArgument: '2018-02-28 00:00:00' for pipe 't'

Yes, use following format - 2017-11-02T00:00:00Z

NOTE Z at the end, else you will have timezone issue in Safari and Chrome. :)

This issue is still here

I also run into this (angular 7.0)

Any fix for this?

I ended up using a getDate() function that I run once when I get a response from my API, which proves me with a new Date-object that is compatible.
This code makes certain assumptions, so you should modify it to your needs. (additional null check / change input parameter type)

protected getDate(value: any): Date {
    // https://github.com/angular/angular/issues/12334
    return value ? new Date(value.date.replace(/\s/g, 'T')) : undefined;
  }

This is a very subtle bug that is not easy to find, hope for progress on this one.

Perhaps a new issue should be opened as this bug is not about / or - but dates such as 2017-11-02 00:00:00 if i recall correctly.

@sebastian-heinz

@sebastian-heinz take a note about Z present else you will mess up the timezone for safari.

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.}

Navigation Menu

Repository navigation

[Safari only] Invalid argument for pipe 'DatePipe' - Safari cannot parse Date offsets #12334

4 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

[Safari only] Invalid argument for pipe 'DatePipe' - Safari cannot parse Date offsets #12334

Description

Activity

vicb commented on Oct 17, 2016

dolanmiu commented on Oct 17, 2016

dolanmiu commented on Oct 17, 2016

dolanmiu commented on Oct 17, 2016

hypery2k commented on Jan 12, 2017

4 remaining items

jburtondev commented on Jul 3, 2017

MichalCzerwonka commented on Nov 2, 2017

abhishekdgeek commented on Nov 8, 2017

artuska commented on Mar 1, 2018

abhishekdgeek commented on Mar 7, 2018

LeonardoMinatiCrispyBacon commented on Jul 31, 2018

sebastian-heinz commented on Dec 18, 2018

renatop7 commented on Apr 7, 2019

sebastian-heinz commented on Apr 8, 2019

abhishekdgeek commented on Apr 9, 2019

angular-automatic-lock-bot commented on Sep 14, 2019

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions