Menu
How do I go about using the Moment.JS library for an international timezone and display it in real time?
This is what I have so far in my index page.
Code:
<!DOCTYPE html>
<html>
<head>
<script src="moment.js"></script>
<script src="moment-timezone.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
moment().tz("America/Los_Angeles").format();
document.getElementById("time").firstChild.data = moment().format('hh:mm:ss a')
</script>
</head>
<body>
<span id="time">s</span>
</body>
</html>
This is my first time using MomentJS and I dont know if I have implemented it correctly and to display it in real time without refreshing the page constantly.
614
To use moment-timezone, you will need [email protected]+ , moment-timezone.js , and the moment-timezone data. For convenience, there are builds available on momentjs.com/timezone/ with all the zone data or a subset of the data.
Moment-timezone is a separate npm module from moment, but moment-timezone depends on moment under the hood. So you can install moment-timezone by itself, or both moment and moment-timezone. Once you install moment-timezone, you can require() it in and use it like you would use moment.
Any moment created with moment. utc() will be in UTC mode, and any moment created with moment() will not. To switch from UTC to local time, you can use moment#utc or moment#local.
For moment. utc, the date will be parsed and displayed in local time. By default, date will be shown in local time. In case you need to parse it in UTC, you can make use of this method.
You are missing the actual zone data. Go to the moment-timezone data builder and include the zones you care about. Put that in another file called moment-timezone-data.js and include it, or place it inline your existing script. See these docs.
To update it in realtime, you need to update the element on a regular interval.
Also, in your example code, the first time you are calling moment with the timezone, you are throwing away the response. The second call, you're not using the time zone. And you don't need jQuery here.
Putting it all together:
function showTheTime() {
var s = moment().tz("America/Los_Angeles").format('hh:mm:ss a');
document.getElementById("time").innerHTML = s;
}
showTheTime(); // for the first load
setInterval(showTheTime, 250); // update it periodically
You might think that setting the interval to 1000 ms would be ok, but you may find that it visually does not tick smoothly. That happens because the interval timer might not align with the actual clock. It's better to update multiple times per second.
122
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
