How to convert date to another time zone in JavaScript?-JS Tutorial-php.cn

How to convert date to another time zone in JavaScript?

王林

Release： 2023-09-08 23:17:02

forward

1261 people have browsed it

如何在 JavaScript 中将日期转换为另一个时区？

JavaScript has a new Date() constructor which is used to create a date object to get the current date and time. This date object uses the UTC timezone or the client browser's timezone, i.e. if you are in India and use the new Date() constructor to get the date and time, you will get your local time. But sometimes, we may need to get the timezone of another country, which we can't do directly. These can be done using the toLocaleString() method or the format() method. By the end of the article, you will be able to get the date of any other timezone in JavaScript.

The two methods that we will use in this article to convert a date to another time zone are as follows −

Using toLocaleString() Method
Use format() method

Use toLocaleString() method

The toLocaleString() method can be called using a date object. This method has the ability to convert data from one time zone to another based on the parameters passed in. It accepts two parameters, the first parameter is "locale", which is the language of the format convention that should be used, for English it is "en-US", the second parameter is "options", for us it is {timeZone: "countryName"}, where countryName is the name of the country whose time zone we want to change.

The following is a step-by-step process to convert a date to another time zone in JavaScript using the toLocaleString() method.

Use the Date constructor to create a date object
Use the date object with toLocaleString() method and pass the first argument as 'en-US' for English language date and time formatting, and the second argument {timeZone: "America/New_York"} for getting the timezone of New York
Store the value return from this method into a variable, that variable is our required timezone.

Example

In this example, we use JavaScript’s toLocaleString() method to convert a date to another time zone.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Converting date to another timezone in JavaScript</title>
</head>
<body>
   <h3>Convert date to America/New_York Time Zone using toLocaleString() Method</h3>
   <p id="input">Local Time: </p>
   <p id="output">America/New_York Time Zone: </p>
   <script>
      // date objec
      let date = new Date();
      document.getElementById("input").innerText += date ;
      
      // convert date to another timezone
      let output = date.toLocaleString("en-US", {
         timeZone: "America/New_York"
      });
      
      // display the result
      document.getElementById("output").innerText += output;
   </script>
</body>
</html>

Copy after login

Using Format() Method

We can use the format() method with the "Intl.DateTimeFormat" object and use the date object passed as an argument to the format() method to convert the timezone to a timezone passed while creating the "Intl.DateTimeFormat" object. It sounds complicated but it is very simple if you look at the example below.

Here is the step-wise procedure to convert a date to another timezone in JavaScript using format() Method.

Create a date object using the Date constructor.
When creating the "Intl.DateTimeFormat" object, set the first parameter to 'en-US' for English language date and time formatting, and the second parameter {timeZone: "America/New_York "} is used to get the time zone of New York.
Use the format() method with this object and pass the date object as an argument and store it in a variable, that variable is our required timezone.

Example

In this example, we are converting a date to another timezone in JavaScript using the format() Method.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Convert date to America/New_York timezone in JavaScript</title>
</head>
<body>
   <h3>Convert date to America/New_York timezone using format() Method</h3>
   <p id="input">Local Time: </p>
   <p id="output">America/New_York Time Zone: </p>
   <script>
      // date objec
      let date = new Date();
      document.getElementById("input").innerText += date ;
      
      // create a new date object
      let newObj = Intl.DateTimeFormat('en-US', {
         timeZone: "America/New_York"
      })
      
      // convert date to another timezone
      let newDate = newObj.format(date);
      
      // display the result
      document.getElementById("output").innerHTML += newDate;
   </script>
</body>
</html>

Copy after login

Summary

Let's summarize what we learned in this tutorial. We see that we have two ways to convert a date to another time zone, the first is using the toLocaleString() method of the date object, and the second is using the format() method of the "Intl.DateTimeFormat" object. These two methods have different use cases and you can choose according to your needs. We recommend using the toLocaleString() method, which is easy to use and requires fewer lines of code than using the format() method of the "Intl.DateTimeFormat" object.

The above is the detailed content of How to convert date to another time zone in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!