javascript - How to convert Moment to another moment depending on timezone

Question

I really bad in JS and I'm struggling with moment.js

My wish is: get a date from a div (UTC) and convert this date depending on the timezone of the user.

So if the UTC date is 30/03/2017 6:34:22 AM Someone in New York sees 30/03/2017 2:34:22 AM Someone in Perth sees 30/03/2017 2:34:22 PM

I did something similar in C# with TimeZoneInfo and IsDaylightSavingTime but I don't know how to do this in JS.

Below my code:

// <div id="utc-time">30/03/2017 6:34:22 AM</div>

var dt = document.getElementById("utc-time").innerHTML;  
var m = moment(dt, "DD-MM-YYYY hh:mm:ss a");
var tz = moment.tz.guess();
var user = moment.tz(dt, "DD-MM-YYYY hh:mm:ss a", tz);
var mString = m.toString();

// Console.log
// -----------
dt = 30/03/2017 6:34:22 AM
m = 1490826862000
user = Thu Mar 30 2017 06:34:22 GMT+0800
mString = Wed Mar 29 2017 22:34:22 GMT+0000

It looks like the moment created is not UTC but keep the local timezone. A hint would be nice :)

Answer 1

You can use moment local() to convert moment object to user local time, while you can use tz() to convert time between zones.

Use moment.utc to parse date as UTC. Use format() to show values of moment objects.

If you just need to support UTC and user local time, you don't need moment-timezone.

Here a working sample:

var dt = document.getElementById("utc-time").innerHTML;  
var m = moment.utc(dt, "DD-MM-YYYY h:mm:ss A"); // parse input as UTC
console.log(m.clone().local().format("DD-MM-YYYY h:mm:ss A")); // local time
var tz = 'America/New_York'; // example value, you can use moment.tz.guess()
console.log(m.clone().tz(tz).format("DD-MM-YYYY h:mm:ss A")); // 30-03-2017 2:34:22 AM
tz = 'Australia/Perth';
console.log(m.clone().tz(tz).format("DD-MM-YYYY h:mm:ss A")); // 30-03-2017 2:34:22 PM

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.7/moment-timezone-with-data-2010-2020.min.js"></script>

<div id="utc-time">30/03/2017 6:34:22 AM</div>