Angular 6 Date Pipe not showing anything on iPhone safari browser

Question

I'm using simple date pipe to format date which is working fine on web and android browsers but on IOS it's showing nothing. If I remove the PIPE and display data then it's shown but not with the PIPE.

{{race.race_date | date:'M/d/y'}}

You can check this issue on Issue link

Backend is returning data correctly.

are you sure `race.race_date` is a Date object, a number (milliseconds since UTC epoch), or an ISO string ?? — Jazib, Feb 19 '19 at 14:51
yes I'm sure because everything is working fine on web browser and android. — Umair Malik, Feb 19 '19 at 14:55

score 9 · Answer 1 · answered Feb 19 '19 at 15:06

9

UPDATE: ah yes, the issue is with ios device only, you need to either use a custom pipe or convert the date to a date object. you can use moment but heres a custom pipe

<span>{{race.race_date | dateTimeFormatFilter : "MMM DD, YYYY"}}</span>

@Pipe({name: "dateTimeFormatFilter"})
@Injectable()
export class DateTimeFormatPipe implements PipeTransform {
transform(date: any, format: string): any {
    if (date) {
     return moment(date).format(format);
    }
  }
}

answered Feb 19 '19 at 15:06

Jazib

1,343
13
27

Thanks @jazib, I'll check it shortly. – Umair Malik Feb 19 '19 at 15:09
1

In case it is still relevant enable Safari debugger and choose localhost of your device. It will show the error message which might make it easier. But for me this solution worked thanks! – Sinan Samet Sep 27 '19 at 11:28
Does anyone know why this is the case and if it has been fixed? – Phil May 07 '20 at 15:07
2

in case anyone cares this is also an issue on huawei devices as of Angular 9 – EmreAkkoc Jun 06 '20 at 19:32
1

This is a lifesaver! Though I'm curious, why does this only apply to iOS? Can anyone explain? – Chan Jing Hong Sep 07 '20 at 10:46

score 3 · Answer 2 · edited Nov 25 '21 at 08:32

I ran into the same issue. I don't know how much local settings affect it, but here's what I have found.

The correct date format that works for me looks like this:

"2021-11-25T09:08:28"

I had problem with format "2021-11-25 09:08:28" so all I did is replace space with a 'T'.

In angular it looks like this:

{{ "2021-11-25 09:08:28".replace(' ', 'T') | date: 'dd.MM.' }}

As far as I know the date format after pipe, in my case 'dd.MM.', doesn't have affect on the problem. This format type also works in Chrome.

Angular 6 Date Pipe not showing anything on iPhone safari browser

2 Answers2

Linked