JavaScript

How to handle time zones in JavaScript code

JavaScript has become the most popular and massively used scripting language. In this modern era, almost every website uses JavaScript. In our daily life, time plays a vital role because if we want to add an update to the application it stamps the backup with the current date and time. Take an example of a blog website. Blogs can use timestamps which help to indicate the date of the comment, publish date, last modified date, and many more.

A time zone represents uniform standard time for different purposes in a country. It is quite common for different countries to have a unique time zone, with some large countries like the USA and Canada having multiple time zones.

GMT

The abbreviation of GMT is “Greenwich Mean Time”.GMT is a local time and became popular in January 1972.

UTC

UTC is generally a time system that uses the frequency of cesium atomic to synchronize the standard time. UTC and GMT are more or less the same in many cases but in a few cases, UTC gives a more accurate time as compared to GMT.

Offset

Offset is known as the comparative time between local time and standard time of UTC.

Now we are demonstrating how to handle time zones in JavaScript and what are the different ways to include dates in your website.

First, we have to create an instance of Date() and assign the object of Date() to a “current_date_obj” variable. Run the below-mentioned lines of code to get the current date. This piece of code will return you today’s time and date of your particular time zone in an object.

const current_date_obj = new Date();
console.log(current_date_obj);

Output

If you want to use an object containing the current date and time then you have to format it accordingly through several Date methods of JavaScript. Run the below-mentioned code if you want to get the current date with a specific format.

const date_obj = new Date();
const current_date = date_obj.getDate();
console.log("Current Date" + ":" + current_date);
const current_month = date_obj.getMonth();
console.log("Current Month" + ":" + current_month);
const current_year = date_obj.getFullYear();
console.log("Current Year" + ":" + current_year);
return console.log(current_date + '/' + (current_month + 1) + '/' + current_year);

Output

Formatting a date according to your time zone is a way much easier task in JavaScript. Moreover, if you want to display distinct time zones for several countries on a web application then you need to do some calculations and convert local time accordingly. For instance, we have to implement functionality that gives an alert after every 16 hours according to a particular time zone. For this, below mentioned steps should be followed.

  1. First of all, you need to convert the date in milliseconds since 1st January 1970.
  2. Then you have to get the offset of UTC and convert it into milliseconds.
  3. If you add the offset of the local time zone into local time then you get the current UTC time.
  4. After acquiring the current UTC time then you need to obtain the UTC offset of the destination city into hours. Convert a value of UTC offset into milliseconds and add into UTC time accordingly.
  5. At last, you have to format a date-time string into the readable standard format of Date. For this, you have to convert the value of milliseconds into a new string of Date.

Run the following code to get a different time zone after converting the date.

<html>
<head>
<script language="JavaScript">
 
// this is the function in order to compute local time of several cities by passing UTC offset
function computeTime(city_name, offsetUTC) {
 
    // create new instance of Date
    current_date = new Date();
 
    // now you need to get UTC time in msec
    utc_time = current_date.getTime() + (current_date.getTimezoneOffset() * 60000);
 
   // create instance of several cities
    new_date_instance = new Date(utc_time + (3600000*offset));
 
    // in this step you have to return time as a string
    return "Local time of " + city_name + " is " + new_date_instance.toLocaleString();
 
}
// Pakistantime
alert(computeTime('Pakistan', '+5'));
 
// get Singapore time
alert(computeTime('Singapore', '+8'));
 
// get London time
alert(computeTime('London', '+1'));
 
</script>
</head>
<body>
 
</body>
</html>

Output
Here is the output of Pakistan’s local time.

Here is the output of Singapore’s local time.

Here is the output of London’s local time.

Conclusion

In this article, we explained how to get a date and time and then use it according to our desire in effective and efficient ways which are easy to learn for beginners. We have also elaborated on how we can handle time zones in Javascript and related to that we have also provided an example that shows different time zones of different countries through Javascript.

About the author

Shehroz Azam

A Javascript Developer & Linux enthusiast with 4 years of industrial experience and proven know-how to combine creative and usability viewpoints resulting in world-class web applications. I have experience working with Vue, React & Node.js & currently working on article writing and video creation.