Unable to display datetime correctly in iOS/Safari using ionic2/angular2 Unable to display datetime correctly in iOS/Safari using ionic2/angular2 angular angular

Unable to display datetime correctly in iOS/Safari using ionic2/angular2


The issue you are facing is caused by the Intlapi because DatePipe for Angular 2 Release is working fine only for FireFox and Chrome with custom format strings. it Doesn't work on Safari due to lack of Intl. so as a temporary work around is to include the Intl polyfill

<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Intl.~locale.en"></script>

Solution 2 You can use the moment.js which can format your required date as follows

moment(singleTable[0].FromCurrentDate).format("dd/MM/yyyy,h:mm:ss a")

Update 1

In latest angular they have removed the Intl api , and for this you need to update to the angular 5 , reference

Update 2Here is a plunker using MomentJs in angular flavor, i added your date format but didn't tested in safari tested in chrome,


In ios/mac date filter doesn't work, so use moment.js for this.

I have tried lot of stuff but I was able to do best in moment.js

like: I created a pipe

<span>{{ActionDate | 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);        }    }}


I ran into the same issue on safari on desktop and safari/chrome on iPhone. It works on safari or mostly all browsers when the date object is used as the value. (DatePipe)

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:'MM-dd-yyyy h:mm a' }}

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) {            if (value.toString().indexOf(' ') === -1) {                value = value + ' 00:00:00';            }            const temp = value.toString().replace(' ', 'T');            return new Date(temp);        } else {            return null;        }    }}