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?

I'm not exactly sure if this causes the issue and sadly I can't check, because I don't have access to a Mac right now, but Angular 4 uses the intl API and that has caused some issues with Safari. Angular 5 switched away from the intl API for added constiency. — Shadowlauch
– Shadowlauch, Commented Jan 5, 2018 at 11:48

Tummala Krishna Kishore · Accepted Answer · 2018-01-09 07:06:48Z

8

+50

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,

edited Jan 9, 2018 at 7:06

answered Jan 8, 2018 at 13:47

Tummala Krishna Kishore

8,2814 gold badges36 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Madpop Over a year ago

if i choose solution2 then on the html side can i use this moment.js

Tummala Krishna Kishore Over a year ago

@Madpop yes you can , you can get the tutorials for those implementations also

Madpop Over a year ago

but how can i give solution2 moment(singleTable[0].FromCurrentDate).format("dd/MM/yyyy,h:mm:ss a") in {{ }}

Tummala Krishna Kishore Over a year ago

@Madpop as you are using the angular 2 , better try to use moment which supports modular format , ex : npmjs.com/package/angular2-moment

Phonolog · Accepted Answer · 2018-03-10 13:32:44Z

5

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

edited Mar 10, 2018 at 13:32

Phonolog

6,5513 gold badges39 silver badges65 bronze badges

answered Jan 8, 2018 at 4:46

Jassi Walia

754 bronze badges

Comments

Lahar Shah · Accepted Answer · 2019-09-10 01:47:50Z

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

}

DM developing · Accepted Answer · 2019-10-04 21:58:36Z

For me this works on Safari and on Chrome:

import { Pipe, PipeTransform } from '@angular/core';


@Pipe({
  name: 'customDate'
})

export class DatePipe implements PipeTransform {
  transform(value: string): string {

      let dd = value.substr(8, 2);
      let MM = value.substr(5, 2);
      let yyyy = value.substr(0, 4);
      let date = `${dd}.${MM}.${yyyy}`;

      return `${date}`;
  }
}

I had a bug rendering views on Safari when chrome was ok. Later after debugging I found that pipe | date was a problem. So I made custom one. All answers up are great but importing moment library seems like a big file IMHO. Just make this class export, make a module and declare it there(also export it) and use as example: {{_question.created_at | toDateObj: 'dd.MM.yyyy'}}

Hope it helps someone

Abdullah Hazeb · Accepted Answer · 2024-04-17 09:12:02Z

0

You need to receive the date with this format "yyyy-MM-ddTHH:mm" ,it will work for all devices and browsers

edited Apr 17, 2024 at 9:12

answered Apr 17, 2024 at 9:11

Abdullah Hazeb

11 silver badge2 bronze badges

Collectives™ on Stack Overflow

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

5 Answers 5

4 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related