2

I've got a form where I input an event that starts at a certain time. Let's say 9am.

To assign a date/time object I'm using MomentJs. The issue comes when displaying it in different time-zones.

In London will show up 9am as intended - in Kiev will show 11am.

How can I make MomentJS and the browser ignore which timezone is relevant for the user, and just displaying the time I'm giving?

Here's my code:

<p>
Start time:
{moment(event.startDate).format("HH:mm")} 
</p>
iLuvLogix
  • 5,920
  • 3
  • 26
  • 43
SixtyEight
  • 2,220
  • 3
  • 14
  • 25
  • Sorry, what do you mean by "the time you are giving"? Are you referring to your own local timezone? – wentjun Apr 24 '19 at 14:07
  • 1
    `moment.tz('Europe/London').format("HH:mm")` https://momentjs.com/timezone/ – Keith Apr 24 '19 at 14:08
  • I just elaboratly answered a similar question - have a look [here](https://stackoverflow.com/questions/55829344/getting-wrong-timestamp-from-date-in-different-timezone-using-moment/55829890#55829890) – iLuvLogix Apr 24 '19 at 14:13
  • 1
    Possible duplicate of [moment.js - UTC gives wrong date](https://stackoverflow.com/questions/17855842/moment-js-utc-gives-wrong-date) – Heretic Monkey Apr 24 '19 at 14:18

4 Answers4

2

Assuming you have stored the date as utc (which in this case you probably should have), you could use the following:

moment.utc(event.startDate).format("HH:mm")
Will Taylor
  • 1,650
  • 9
  • 23
  • This doesnt work, passing `2022-10-27T19:15:00.000-04:00` gives the time of `23:15` for me (in GMT+3 timezone) – conor909 Jan 20 '23 at 12:11
  • Yes in UTC `2022-10-27T19:15:00.000-04:00` would be 23:15. The above code will display 23:15 regardless of what timezone the user is in. – Will Taylor Jan 23 '23 at 14:42
  • So this answer is not correct, or am I missing something else? – conor909 Jan 23 '23 at 16:32
  • Yes it is the correct answer, OP's question asks how to display a date ignoring the user's timezone... Sounds like you want to not ignore the timezone - what time are you expecting will be displayed in your example? – Will Taylor Jan 25 '23 at 11:56
1

Let me provide an alternative answer in Vanilla JavaScript. If you want to make it timezone 'neutral', you can first convert it to UTC using toISOString().

const current = new Date();
const utcCurrent = current.toISOString();

console.log(utcCurrent);

If you want to convert it to a specific timezone, such as London, you can use toLocaleString(). Do take note of the browser support for the timezone though.

const londonTime = new Date().toLocaleString('en-US', { timeZone: 'Europe/London' })
console.log(londonTime);
wentjun
  • 40,384
  • 10
  • 95
  • 107
1

What you want is a normalized Datetime. This can get a little confusing since the concept of timezones is a rather arbitrary construct.

I like to think of Datetime values as "absolute" and "relative". An "absolute" Datetime is one that is true regardless of which timezone you're in. The most common example of these are UTC(+000) and UNIX Time (also known as Unix epoch, POSIX Time or Unix Timestampe).

UTC is pretty obvious. Its the current time at +000 timezone. UNIX time is a bit more interesting. It represents the number of seconds that have elapsed since January 1, 1970.

You should always store data, in both client and backend, as an "absolute" time. My preference is UNIX time since its represented as a single integer (nice and clean).

moment.js does this for you. When you instantiate your moment object, you can use:

var date = moment.utc(utcString)

or for Unix Time

var date = moment.unix(unixInt)

You can then use this object to display the date in any form you wish:

console.log(date.tz.("America/Toronto"))

jmkmay
  • 1,441
  • 11
  • 21
0

The only way I could solve this is by removing the timezone and milliseconds info from the string. I used date-fns lib but I imagine moment will work the same way.

  import { format } from 'date-fns'

  const myDateTimeString = '2022-02-22T19:55:00.000+01:00'
  const dateTimeWithoutTimezone = myDateTimeString.slice(0, 16) // <- 2022-02-22T19:55
  format(new Date(dateTimeWithoutTimezone), 'HH:mm')
conor909
  • 1,475
  • 14
  • 29