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.

Quincunx

are you sure race.race_date is a Date object, a number (milliseconds since UTC epoch), or an ISO string ?? – Elmoelmore

yes I'm sure because everything is working fine on web browser and android. – Quincunx

Answer 1

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);
    }
  }
}

Elmoelmore

Thanks @jazib, I'll check it shortly. – Quincunx

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! – Krona

Does anyone know why this is the case and if it has been fixed? – Spontoon

in case anyone cares this is also an issue on huawei devices as of Angular 9 – Berryberryhill

This is a lifesaver! Though I'm curious, why does this only apply to iOS? Can anyone explain? – Disputatious

Answer 2

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.

Vocalise