DatePicker value changes after .getDate()

Ask the community
, ,
1

Hi,

I have a strange issue and I can’t seem to figure out what is going wrong.

On my site (travel services), I have multiple datePickers where travellers input their birth date. After input, I store these datePicker input values in an array, along with all other birth dates of other travellers that are entered by the customer on the same page.

When I log the stored values from the array to the console, all is fine. But then, when I start to do some data manipulations to get certain string values I can later use on other pages, things go wrong.
After calling .getDate() on the stored date values in the array, the date I get returned and logged to the console is always 1 day behind compared to the original date that was entered in the datePicker.

See notes in code snippets for an example.

Frontend code snippet:

import { getBirthDate } from 'backend/getBirthDate.jsw';

var travellers_dateofbirth = { "traveller1_dateofbirth": undefined, "traveller2_dateofbirth": undefined, "traveller3_dateofbirth": undefined, "traveller4_dateofbirth": undefined, "traveller5_dateofbirth": undefined, "traveller6_dateofbirth": undefined, "traveller7_dateofbirth": undefined, "traveller8_dateofbirth": undefined, "traveller9_dateofbirth": undefined, "traveller10_dateofbirth": undefined };
// I will only use the case for traveller1 for this example snippet, but the issue happens with all travellers using the same code.

export async function button59_click(event) {
    travellers_dateofbirth["traveller1_dateofbirth"] = $w("#datePicker6").value;
    console.log(travellers_dateofbirth["traveller1_dateofbirth"]);
    // e.g.: I input 13 January 1994, this logs "Thu Jan 13 1994 00:00:00 GMT+0100 (Midden-Europese standaardtijd)" to the console. This seems correct.
    let birthDateData = await getBirthDate(1, travellers_dateofbirth, /* some other parameters not relevant here*/);
    // Now I continue using these data but date is now wrong...
}

The backend function that I call:

export function getBirthDate(i, travellers_dateofbirth, /* some other parameters not relevant here*/) {
        let traveller_dayofbirth = travellers_dateofbirth[`traveller${i}_dateofbirth`].getDate();
        console.log(traveller_dayofbirth);
        // In the same example as before (stored as "Thu Jan 13 1994 00:00:00 GMT+0100 (Midden-Europese standaardtijd)" in array), this logs "12" to the console. When I use this date later on my page it shows 12 January 1994.
        // Now I continue using data but date is wrong... The rest of this backend code is not relevant here.
}

Can someone explain what is happening here? Thanks!

2

Oh boy. DatePicker and JS-dates, a recipe for head aches. I went thru this also and took me some months to understand. I will try to keep it short:

  1. when somebody picks a date with datePicker, datepicker resets time part of the date to 0:00:000 before sending to server (backend)
  2. on the backend, dates (JS-dates include the time-part, they are defined as millisec form Jan 1, 1970, UTC +0:00:000) are stored in UTC
  3. Jan 13 1994 0:00:000 hours in the Netherlands (UTC +1 [sometimes]) is UTC Jan 12 1994 23:00:000
  4. when you do a getDate (on the backend) you get what is stored: 12, not 13.

How to solve this? It’s complicated. If you have many international users from all over the globe, you have to correct on client and on server. If you only have people inside your business’s time zone, you can get away with doing it only on the server or fronted: add the offset of Netherlands against UTC (which is NOT a constant, Netherlands still has, I believe, summer and winter time, so that’s sometimes 1, sometimes 2 hours diff against UTC).
So Jan 13 1994 0:00:00 (the date/time) datePicker returns now must be corrected (if we do it on the frontend) with the offset (https://www.w3schools.com/jsref/jsref_gettimezoneoffset.asp). Let’s say this now (but tomorrow might be different) returns (in hours) 1 hour. You add that to the date/time from datepicker before storing it on the backend. SO now, in the db, the time will be 0:00:000 because that is 1:00:000 in NL. In CM (Content Manager) it will, looking at it in Holland, display 1:00:000. Who cares.
And then, a getDate should be ok.
1 tip: when you start adding hours, use a date library, do not even think of going at it yourself. I use date-fns NPM. It’s small and quick. Look at “add”.

Veel “plezier”, Je wordt er echt krankjorum van.

3

Wow, that was a great explanation, thank you so much! I know it’s quite an adventure, I’ve been going through some other headaches with dates myself already as well. But this was something I could not understand. Until now, so thank you very much for taking the time for such a detailed answer! I think I can now continue from here and dive deeper into the timezone offsets.

Bedankt!