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

Question

Hi im facing a weird issue here im getting dynamic data in that im also getting the date and time and im displaying it in html using date pipe in chrome/android it is working good but when i check ios/Safari it is showing time difference

below is my json data im consuming

FromCurrentDate: "2018-01-05T00:00:00"

FromPreviousDate: "2018-01-04T00:00:00"


ToCurrentDate: "2018-01-05T14:00:53.137"

ToPreviousDate: "2018-01-04T14:00:53.137"

im displaying the date like this and in chrome/android it is displaying like this

in Ios/safari it is displaying like this in the template im using the code below

Currrent {{singleTable[0].FromCurrentDate|date: 'dd/MM/yyyy,h:mm:ss a'}} to {{singleTable[0].ToCurrentDate|date: 'dd/MM/yyyy,h:mm:ss a'}}

how can i solve this time difference issue?

Answer 1

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 2 Here is a plunker using MomentJs in angular flavor, i added your date format but didn't tested in safari tested in chrome,