Creating timezone independent dates in Javascript?

Question

This question is related to this question.

So if we construct a date using an ISO string like this:

new Date("2000-01-01")

Depending on what timezone we are in, we might get a different year and day.

I need to be able to construct dates in Javascript that that always have the correct year, day, and month indicated in a string like 2000-01-01, and based on the answer in one of the questions if we use back slashes instead like this:

const d = new Date("2000/01/01")

Then we will always get the right year, day, and month when using the corresponding date API methods like this:

d2.getDate();
d2.getDay();
d2.getMonth();
d2.getFullYear();

So I just wanted to verify that my understanding is correct?

Ultimately I need to be able to create Date instances like this for example:

const d3 = new Date('2010/01/01');
d3.setHours(0, 0, 0, 0);

And the time components should always be zero, and the year, month, and day should be the numbers specified in the string.

Thoughts?

I just did a quick test with this: https://stackblitz.com/edit/typescript-eztrai

const date = new Date('2000/01/01');
console.log(`The day is ${date.getDate()}`);
const date1 = new Date('2000-01-01');
console.log(`The day is ${date1.getDate()}`);

And it logs this:

The day is 1
The day is 31

So it seems like using backslashes should work ...

Or perhaps using the year, month (0 based index), and day constructor values like this:

const date3 = new Date(2000, 0, 1);
date3.setHours(0, 0, 0, 0);
console.log(`The day is ${date3.getDate()}`);
console.log(`The date string is ${date3.toDateString()}`);
console.log(`The ISO string is ${date3.toISOString()}`);
console.log(`Get month ${date3.getMonth()} `);
console.log(`Get year ${date3.getFullYear()} `);
console.log(`Get day ${date3.getDate()} `);

NOTE

Runar mentioned something really important in the accepted answer comments. To get consistent results when using the Javascript Date API use methods like getUTCDate(). Which will give us 1 if the date string is 2000-01-01. The getDate() method could give us a different number ...

Answer 1

From the ECMA standard of the Date.parse method:

When the UTC offset representation is absent, date-only forms are interpreted as a UTC time and date-time forms are interpreted as a local time.

What is happening is that New Date() implicitly calls Date.parse on the string. The "2000-01-01" version conforms to a Date Time String Format with a missing offset representation, so it is assumed you mean UTC.

When you use "2000/01/01" as input the standard has this to say:

If the String does not conform to that format the function may fall back to any implementation-specific heuristics or implementation-specific date formats.

So in short the browser can do what they want. And in your case it assumes you mean the offset of the local time, so whichever offset you are located in gets added when you convert to UTC.

For consistent results, perhaps you want to take a look at Date.UTC

new Date(Date.UTC(2000, 0, 1))

If you need to pass in an ISO string make sure you include the time offset of +00:00 (is often abbreviated with z)

new Date("2000-01-01T00:00:00Z");

If you want to later set the date to something different, use an equivalent UTC setter method (e.g. setUTCHours).

When you retrieve the date, also make sure to use the UTC getter methods (e.g. getUTCMonth).

const date = new Date("2000-01-01T00:00:00Z");

console.log(date.getUTCDate());
console.log(date.getUTCMonth());
console.log(date.getUTCFullYear());

If you want to retrieve the date in a specific format you can take a look at Intl.DatTimeFormat, just remember to pass in timeZone: "UTC" to the options.

const date = new Date("2000-01-01T00:00:00Z");
const dateTimeFormat =
  new Intl.DateTimeFormat("en-GB", { timeZone: "UTC" });

console.log(dateTimeFormat.format(date));