DatePipe Error only on Safari

[DN0300]

I'm submitting a ...

[ ] Regression (behavior that used to work and stopped working in a new release)
[x] Bug report 
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

I am using the Angular DatePipe to format my dates I am getting from an API call, but it doesn't work only on Safari. It works as expected on every other browser. Here is the Error that I am getting.

Runtime Error:
InvalidPipeArgument: '2015-02-26 14:10:43' for pipe 'DatePipe'

Expected behavior

<p>{{ item.date | date:'MMM dd' }}</p>
I expect it t transfrom a string like this '2015-02-26 14:10:43' into Feb 26
This happens without any issues in other browsers.

Minimal reproduction of the problem with instructions

Set a date variable to '2015-02-26 14:10:43' and try to transform it using DatePipe using the following example.
<p>{{ item.date | date:'MMM dd' }}</p>

Please tell us about your environment

Angular version: 4.1.2


Browser:
- [ ] Safari (desktop) version 10.0


 
For Tooling issues:
- Node version: 6.11.0
- Platform: 

Others:

[wKoza]

It's not an Angular Issue but a behavior different between browsers. If you use this pattern, it's work :

new Date('2015-02-26T14:10:43+01:00');

See this link for more details

[ocombe]

As @wKoza said, if you use a string instead of a date, it has to follow the ISO8601 spec.

[ghost]

Just providing my two cents as I've been fighting this issue for a while.

The date I'm retrieving is formatted as such 2017-07-28 12:02:14

Both Safari & IE11 return errors when I try to format it using the below code.

{{ someDate | date:mediumDate }}

The way I resolved it ( yet to be tested on IE11 ) is below.

Component

public formatedDate: Date;
this.formatedDate = new Date(someDate.replace(/-/g, "/"));

Template

{{ formatedDate | date:mediumDate }}

Hope this helps

[laharshah]

I resolved the same issue by adding a custom pipe to convert the date-time string into date object and then the date pipe works as expected.

Component

someDate1 = "2019-09-01 12:02:14";
someDate2 = "2019-09-01";
someDate3 = "2019-09-01 00:00:00";

Template

{{ someDate1 | toDateObj | date:mediumDate }}

Here is the toDateObj custom pipe I added.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'toDateObj'
})
export class ToDateObjPipe implements PipeTransform {

    transform(value: any): any {

        if (value) {
            const temp = value.toString().replace(' ', 'T');
            return new Date(temp);
        } else {
            return null;
        }
    }

}

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