Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to convert date to another timezone in 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
Using format() Method
Using toLocaleString() Method
The toLocaleString() method can be called using the date object. This method has the ability to convert data from one timezone to another according to the argument passed in. It takes two arguments, the first one is "locale" which is the language whose formatting conventions should be used, for English it is "en-US" and the second one is "options" which is {timeZone:"countryName"} for us, where countryName is the name of the country we want to change the timezone for.
Here is the step-wise procedure to convert a date to another timezone in JavaScript using the toLocaleString() method.
Create a date object using the Date constructor
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 are converting a date to another timezone in JavaScript using the toLocaleString() method.
<!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>
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.
Create the “Intl.DateTimeFormat” object while passing 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.
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>
Summary
Let's summarize what we've learned in this tutorial. We see that we have two methods to convert the date to another timezone, first using the toLocaleString() method of date object and second using the format() method with the "Intl.DateTimeFormat" object. Both methods have different use cases which you can choose according to your need. The one we recommend is using the toLocaleString() method, it is easy to use and requires fewer lines of code than using the format() method with the "Intl.DateTimeFormat" object.
7K+ Views
