Converting Between Time-Zones using URLSearchParams

Question

I'm working on a web application that supports link sharing. This link contains the clients selected dates (start and end date) from a date selector react component. As the user changes the selected dates they are accurately represented in the URL ready to be shared with other uses. When another user clicks on this link it should open the same web application except the default selected dates inside the date selector component will be parsed from the URL instead (if they exist otherwise uses the default).

This works exceptionally well when the links are shared between two people in the same time zone. However, if I send my link to someone in a different time-zone the selected dates for them are not the same as mine.

Currently when writing the local dates to the URL I am doing the following steps:

url.set("startDate", dates[0].toISOString());
url.set("endDate", dates[1].toISOString());

where date[0] and date[1] are date objects in the current users local time-zone.

When I parse the URL I do the following:

var startDate = new Date(url.get("startDate") ?? "");
var endDate = new Date(url.get("endDate") ?? "");

if (startDate.toString() === "Invalid Date") {
    startDate = defaultStartDate; // user local time ( uses new Date() )
}

if (endDate.toString() === "Invalid Date") {
    endDate = defaultEndDate; // user local time ( uses new Date() )
}

For example, I have two brokers running one in Eastern Standard and another in Pacific Standard. If I select 06/01/2021 and 06/05/2021 in Eastern Standard the link that is constructed looks like the following:

startDate=2021-06-01T04%3A00%3A00.000Z&endDate=2021-06-06T03%3A59%3A59.999Z

and when parsed by the user in Pacific Standard the resulting selected dates are: 05/31/2021 and 06/05/2021.

After some further debugging I believe this issue is occurring because the time set by default is 00:00:00 for start date and 23:59:59 for the end date. So when converting from EST -> PST new Date() is subtracting 4 hours from both dates (as it should). However, I need these to be the same dates across multiple time zones.

Can't you just store the timezone in the URL and then convert it when parsing using this? https://stackoverflow.com/questions/10087819/convert-date-to-another-timezone-in-javascript — Joe, Jun 14 '21 at 14:49
@JoeImpact—the timestamps in the URL are UTC in a format that built–in parsers will parse by default. So a solution might be to use the sender's location when generating a timestamp, not when parsing the string. — RobG, Jun 14 '21 at 20:41

RobG · Accepted Answer · 2021-06-14T20:43:47.787

Given the strings are generated by toISOString, the resulting timestamp will be parsed to exactly the same time value by the built-in parser regardless of the user's system offset or settings.

The difference you see is from generating a local date and time from the time value based on different system settings. Given the same input timestamp, both systems should display exactly the same output timestamp if displayed for the same location, e.g. the following parses the timestamp in the OP, then presents the equivalent time in EDT and PDT respectively.

let s = '2021-06-01T04:00:00.000Z';
let startDate = new Date(s);
console.log(startDate.toLocaleString('en', {
  timeZone: 'America/New_York',
  timeZoneName: 'short'
}));
console.log(startDate.toLocaleString('en', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'short'
}));

If you want the receiver to see the same date and time as the sender, then include the sender's IANA representative location (such as 'America/New_York' or encoded as 'America%2FNew_York') in the URL. But that doesn't change the generated time value, only the timestamp displayed by the various toString* methods.

Converting Between Time-Zones using URLSearchParams

1 Answers1