1

I have read many questions related to this issue. However, most solutions included adding third party libraries and I really would like to keep this simple, if possible.

Basically, I'm using Angular 4 and trying to display the date in a nice way to the user. This is an example on how I get the date from an API:

2018-04-12T18:00:00

I'm using Angular's default DatePipe to display it in a nice way:

model.event.startDate | date : "h:mm a”  (OUTPUT SHOULD BE 6PM)

Every browser (Edge, Mozilla and Chrome) displays it correctly (6PM). The only issue is for iPhone users. Safari displays (3PM). I live in Brazil and my users will always be from Brazil (GMT -3)

Is there an easy way to solve this without using any third party libraries?

Any help would be greatly appreciated.

Lucas Arruda
  • 533
  • 1
  • 8
  • 15

2 Answers2

1

Well according to this: Invalid date in safari Safari hates the - in the date time. So here is a method to swap those out.

private timeAsString = '2018-04-12T18:00:00';

var date = this.timeAsString.split('T')[0].replace(/-/g, "/");
var time = this.timeAsString.split('T')[1];
var brokenTime = new Date(this.timeAsString);
var hours = brokenTime.getHours();
var minutes = brokenTime.getMinutes();
var seconds = brokenTime.getSeconds();

this.displayDate = new Date(date);
this.displayDate.setHours(hours);
this.displayDate.setMinutes(minutes);
this.displayDate.setSeconds(seconds);

https://stackblitz.com/edit/angular-pfxdws

This seems like a very roundabout method I know, however new Date('2018/04/12T18:00:00') returns invalid, so I had to get all the times first and then strip it out at the end.

Zze
  • 18,229
  • 13
  • 85
  • 118
0

This seems excessive, but since Safari assumes UTC instead of local time when you use the 2018-04-12T18:00:00 format, and doesn't understand how to parse UTC offsets added to that format, a little more heavy-handed date/time manipulation seems in order:

let ds = '2018-04-12T18:00:00';
let match = /(\d{4})-(\d\d)-(\d\d)T(.+)/.exec(ds);

if (match) {
  ds = 'JanFebMarAprMayJunJulAugSepOctNovDec'.substr(Number(match[2]) * 3 - 3, 3) + ' ' + match[3] + ' ' + match[1] + ' ' + match[4];
}

This turns the above date into Apr 12 2018 18:00:00, which parses consistently in Chrome, Safari, and Firefox.

kshetline
  • 12,547
  • 4
  • 37
  • 73
  • I tried this. -0300 broke Safari (didnt display any Date). I’ll try the answer below. Thanks – Lucas Arruda Apr 09 '18 at 05:08
  • You're right. I just experiments with the web console for the desktop version of Safari, and it doesn't like UTC offsets added to the time either. What an annoying limitation! – kshetline Apr 09 '18 at 05:11
  • Maybe .0000-03:00 would do the trick. I’m not sure if other browsers would like. Or maybe just -03:00 – Lucas Arruda Apr 09 '18 at 05:13
  • Please check, format the date with moment.js not with pipe. – Anu Sivanand Apr 09 '18 at 05:15
  • What does seem to parse consistently as a date/time in the local time zone (comparing Chrome to Safari) is 'Apr 12 2018 18:00:00'. If the other poster's suggestion doesn't work, you could try converting to that format. – kshetline Apr 09 '18 at 05:17