CODEWITHSUNDEEP
javascriptdatejsdatepick
Андрій Грушецький
Андрій Грушецький

Reputation: 109

How to parse date string correctly

I have datestring, image this is 2021-03-05T18:23:42.
I need to create new Date() from this, BUT new Date('2021-03-05T18:23:42') will return date in timezone of current user's browser. But I need to create new Date() in Grinvich (basic) timezone. Exactly 18:23 (in current case), exactly by Grinvich timezone. I mean, that when user who sits somewhere in New Yourk opens my browser, she/he will see not 18:23 like it is in string, but 13:23. Because in NYC there are GTM-5. And if user will open it in Ukraine, she/he will see 20:23 because in Ukraine there are GMT+2.

How to do this?

Upvotes: 1

Views: 198

Answers (2)

Андрій Грушецький
Андрій Грушецький

Reputation: 109

So the problem was that there were missed Z letter.
How it works? There are special standartized date string format, its ISO format. There are no timezones. There are only one timezone and this is Z (zulu, Grinvich).
So.. in any programming language, when we tranform any date to ISO string format, then transofrmer automaticaly do next things

  1. It transofrm our date to Grinwich timezone
  2. Transform Grinviched date into string

And. When we call new Date('dateString') constructor, then it began to read date and if it (browser) doesnt know something, then it (browser) just set something by default.
In my case, I had sent to the browser string like this "2021-03-05T18:23:42" Here are year, month, day, hour, minute. But there are not timezone. So when browser read this string, he set current user's timezone by default. But. When I add 'Z' (I mean string became "2021-03-05T18:23:42Z", then I said to browser: "hey, browser, here is 2021 03 05 18:23 by Grinvich". And when I ask browser

const date = new Date("2021-03-05T18:23:42Z") // pay attention at Z in the end

, browser make 2 things

  1. Read this string and create Date object knowing that this moment in life (time) is wroted by Grinvich
  2. Transform this time to time in current user's timezone

    I'm happy Hope your are too :)

Upvotes: 0

Mr. Polywhirl
Mr. Polywhirl

Reputation: 48640

You can call toLocaleTimeString on the Date instance and specify a timeZone. Don't forget to parse it with the Zulu (Z) timezone specifier.

Note: Checkout the List of tz database time zones on Wikipedia for a list of potential timezone identifiers.

const
  lang = 'en-US',                     // Localization setting 
  timestamp = '2021-03-05T18:23:42Z', // Note the 'Z' at the end
  date = new Date(timestamp),
  setText = (selector, text) => document.querySelector(selector).textContent = text,
  displayDate = (date, lang, options = {}) => date.toLocaleTimeString(lang, options),
  displayLocalDate = date => displayDate(date, lang),
  displayDateGMT = date => displayDate(date, lang, { timeZone:'GMT' }),
  displayDateUkraine = date => displayDate(date, lang, { timeZone:'Europe/Kiev' });

setText('#localDate', displayLocalDate(date));
setText('#date', displayDateGMT(date));
setText('#date-ukraine', displayDateUkraine(date));
.grid {
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: 1fr 2fr;
  grid-row-gap: 0.5em;
  width: 14em;
}

label {
  display: inline-block;
  font-weight: bold;
}

label:after {
  content: ':';
}
<div class="grid">
  <label>Local  </label> <span id="localDate"></span>
  <label>GMT    </label> <span id="date"></span>
  <label>Ukraine</label> <span id="date-ukraine"></span>
</div>

Upvotes: -1

Related Questions