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.

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

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.