Wrong Date representation

[SepidehAlassi]

Browser based problem with date representation. see
https://github.com/dhlab-basel/beol/issues/75

Date is shown correctly in Safari, but incorrectly in Chrome!

[andreas-aeschlimann]

If you use the JavaScript Date object, I recommend you to use the representation "YYYY-MM-DDTHH:MM:SS" in order to avoid issues with time zones (the T is important).

If you create a Date instance with a string like "2018", it might be possible that the browser uses "2018-01-01 00:00:00 CET" as entry string. But when you print out a string again, it might use UTC, resulting in "2017-12-31 23:00:00 UTC".

In my eyes, the representation is correct in Chrome and Firefox, but wrong in Safari. Try this in the browsers:

const datetime = "2018-01-01 00:00:00";
const utcDate: Date = new Date(datetime.replace(" ", "T")); // this gives UTC in Safari
const date: Date = new Date(utcDate.getTime() + utcDate.getTimezoneOffset() * 60000);

[flavens]

As Andreas says, this is a time zone issue.
However, the date is type specific (DateSalsah) and an interface to format the date as we want (DateFormatter). I cannot use directly your solution here: date.replace("", "T").
And I have not found the way to change the T in the date with our configuration. Still working on it...

[SepidehAlassi]

@andreas-aeschlimann well I am puzzled. If it is timezone problem, how can be that for me safari is showing correct date but chrome not but for you it is other way around? shouldn't the problem be consistent for everyone w.r.t browser type?

[andreas-aeschlimann]

@SepidehAlassi it is the other way around. See the following console output:

Chrome:

new Date("2018-01-01 00:00:00").toString()
"Mon Jan 01 2018 00:00:00 GMT+0100 (Central European Standard Time)"

Safari:

new Date("2018-01-01 00:00:00").toString()
"Invalid Date"
new Date("2018-01-01T00:00:00").toString()
"Mon Jan 01 2018 01:00:00 GMT+0100 (CET)"

As you can see, Safari doesn't even accept the standard ISO datetime. Adding the "T" as I said gives you back a wrong time in Safari. I entered 00:00:00 and when I print it I get another time, in fact 01:00:00.

This can be fixed in the following way: Add a "Z" to the datetime string as follows:

new Date("2018-01-01T00:00:00Z").toString()

This will consistently give the same time accross all browsers. However, the return value is 01:00:00 which is not want you probably want. Hence the fix as I posted above:

const datetime = "2018-01-01T00:00:00Z";
const utcDate: Date = new Date(datetime); // this assumed UTC, so it returns 01:00:00 in CET
const date: Date = new Date(utcDate.getTime() + utcDate.getTimezoneOffset() * 60000);

The implementation of course depends on how the database/server is configured and how you want to store and represent times.

[flavens]

I think we have to refactor the whole date component. At the moment, we are dealing with strings and specific Date type that makes very difficult to change the timezone.

[andreas-aeschlimann]

@flavens okay.

From my experience I can recommend moment.js, it takes care of all these annoying and nasty conversions. There is also a wrapper for Angular at https://github.com/urish/ngx-moment.

[tobiasschweizer]

Please keep in mind that we are using the DateAdapter for JDNConvertibleCalendar for the Material Datepicker. This shouldn't be a problem, but there is also an DateAdapter for MomentJS.

[SepidehAlassi]

As you can see, Safari doesn't even accept the standard ISO datetime. Adding the "T" as I said gives you back a wrong time in Safari. I entered 00:00:00 and when I print it I get another time, in fact 01:00:00.

@andreas-aeschlimann Well, I tried your example in both Safari and Chrome, the result is very interesting
Chrome:

new Date("2018-01-01 00:00:00").toString()
<"Mon Jan 01 2018 00:00:00 GMT+0000 (Greenwich Mean Time)"

Safari:

new Date("2018-01-01 00:00:00").toString()
< "Invalid Date"
new Date("2018-01-01T00:00:00").toString()
< "Mon Jan 01 2018 00:00:00 GMT+0000 (GMT)"

As you see both safari and chrome give me the correct time because I am in GMT time zone. It seems to me that the conversion from GMT to central European time in safari is not correct!

[SepidehAlassi]

This can be fixed in the following way: Add a "Z" to the datetime string as follows:

new Date("2018-01-01T00:00:00Z").toString()

This will consistently give the same time accross all browsers. However, the return value is 01:00:00 which is not want you probably want. Hence the fix as I posted above:

@andreas-aeschlimann I also tried this, look at the result
Safari:

new Date("2018-01-01T00:00:00Z").toString()
< "Mon Jan 01 2018 00:00:00 GMT+0000 (GMT)"

Chrome:

new Date("2018-01-01T00:00:00Z").toString()
"Mon Jan 01 2018 00:00:00 GMT+0000 (Greenwich Mean Time)"

They also both return 00:00:00 GMT!

[andreas-aeschlimann]

@SepidehAlassi indeed, I think this is correct. Using Z you always get GMT, which is the correct time in your case right now. But to make sure time zones are reflected in the return string (if needed?), we might have to fix it with the offset function.

[andreas-aeschlimann]

One of the problems seems a breaking change in EcmaScript 6. Chrome has already implemented it, others haven't. This makes time handling a nightmare without a package as MomentJS.

This post summarizes it nicely:
https://stackoverflow.com/questions/29174810/javascript-date-timezone-issue

TLDR: There is no consistent way of creating JS Date objects at the moment because browsers treat date strings differently.