Moment Js Local Timezone

This tutorial explains how to implement to get a JavaScript date object from user selected date time & timezone and the date object can be sent server side to save or for further processing. HTML5 provides input type datetime-local allows user to enter both a date and a time and the user’s local time zone is used. For simplicity, Let’s enhance this to allow user to select any timezone. We are going to use Moment-Timezone library.

HTML

24 hour Countdown timer in local timezone using moment.js in ionic 5 Posted on September 20, 2020 by Kool jay I am trying to implement a 24 hour countdown-timer in hh:mm:ss format using moment.js which will start at 23:59:59 stop at 00:00:00. Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor. Reddit hyken chair.

Here is the HTML code for user input of datetime and timezone:

Moment Js Get Local Timezone Offset

Moment js get local timezone offset
  • You can use moment.utc since your input is an UTC string. You can use tz to convert your moment object to a given timezone. Please note that the tz function converts moment object to a given zone, while you are using moment.tz parsing function that builds a new moment object with the given zone.
  • Moment js convert to local timezone. Moment Timezone, To convert UTC time to Local you have to use moment.local. For more info see docs. Example: var date = moment.utc.format('YYYY-MM-DD I use the Moment.js and Moment-Timezone frameworks, and have a Moment.js date object which is explicitly in UTC timezone.
  • Native time zone and Intl support (no locale or tz files). General documentation; API docs; Install guide; Quick tour; For Moment users; Why does.
Moment js local time zone chart

To get different datetime results, the following code is used:

Get Timezone List

MomentMoment

In above HTML code, dropdownTimeZone will have a list of time-zones. To bind timezone names, we will use moment-timezone library. Let’s add the library files in head tag.

You can use CDN version:

Add a script tag before </body> and add following code to get timezone names:

It will add all timezone as options in dropdownTimeZone and local browser timezone is selected by default.
To load current datetime as default value in HTML5 datetime-local control:

Date Formats

Let’s create a common format to see different dates:

We will use it before displaying the date.

Moment Js Local Timezone

Here are the methods to get UTC, user selected datetime with timezone and its UTC value:

Let’s implement submitDate method which is called on Calculate button click:

As we are loading current date time and browser timezone by default, let’s call submitDate to get results by default.

Output

When you run the page, you will get following datetimes

This is just sample to display the datetimes. If you want to get JavaScript date object, you can use following method:

and replace formatDate to getDate to get date object.

Get Local Timezone Moment Js

Conclusion

This tutorial covers following things:
– Creating timezone list using Select element
– Set browser timezone as default value of timezone list
– Using datetime-local HTML5 input and set current datetime as default.
– Displaying date based on UTC, Local and user selected timezone.
– How to use Moment-Timezone library.

Enjoy JavaScript!!