Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to convert UTC date time into local date time using JavaScript?
Timezone handling is an essential component of every web application. The time that is recorded in the backend is usually in UTC format. When it is displayed to the user, however, it must be converted to the user's local time. This is possible with JavaScript. We'll look at how to use JavaScript to convert UTC date time to local date time in this blog.
JavaScript Date Object
JavaScript includes a "Date" object that allows us to work with dates and times. The Date object includes various methods for working with dates and times, including:
- Date() - Creates a new Date object with the current date and time
- getTime() - Returns the time in milliseconds since January 1, 1970 UTC
- getTimezoneOffset() - Returns the difference in minutes between UTC and local time
- getUTCFullYear() - Returns a date's year in the UTC time zone
- getUTCMonth() - Returns a date's month in the UTC time zone
- getUTCDate() - Returns the day of the month in the UTC time zone
- getUTCHours() - Returns a date's hour in the UTC time zone
- getUTCMinutes() - Returns a date's minutes in the UTC time zone
- getUTCSeconds() - Returns a date's seconds in the UTC time zone
Converting UTC to Local Time
We must use the getTimezoneOffset() method to convert UTC date time to local date time. This method returns the time difference in minutes between UTC and local time. This difference can then be used to convert the UTC date time to the local date time.
Example: Current UTC to Local Time
The following code will convert the current UTC date time into local date time:
<!DOCTYPE html>
<html>
<body>
<div id="result"></div>
<script>
var utc = new Date();
var offset = utc.getTimezoneOffset();
var local = new Date(utc.getTime() - offset * 60000);
document.getElementById("result").innerHTML = "UTC: " + utc + "<br>Local: " + local;
</script>
</body>
</html>
UTC: Mon Dec 09 2024 15:30:45 GMT+0000 (UTC) Local: Mon Dec 09 2024 10:30:45 GMT-0500 (EST)
Here we create a new Date object called "utc" which holds the current date and time. We use getTimezoneOffset() to get the time difference in minutes between UTC and local time, then subtract this offset to get the local time.
Example: Specific UTC to Local Time
We can also convert a specific UTC date time into local time by passing the UTC date as a parameter:
<!DOCTYPE html>
<html>
<body>
<div id="result"></div>
<script>
var utc = new Date("2023-12-25T12:00:00Z");
var offset = utc.getTimezoneOffset();
var local = new Date(utc.getTime() - offset * 60000);
document.getElementById("result").innerHTML =
"UTC: " + utc.toISOString() + "<br>" +
"Local: " + local.toString();
</script>
</body>
</html>
UTC: 2023-12-25T12:00:00.000Z Local: Mon Dec 25 2023 07:00:00 GMT-0500 (EST)
Converting Local Time to UTC
To convert local date time to UTC date time, we can use the getTimezoneOffset() method in reverse. Since this method returns the time difference in minutes between UTC and local time, we add this offset to convert local time to UTC.
Example: Current Local to UTC Time
<!DOCTYPE html>
<html>
<body>
<div id="result"></div>
<script>
var local = new Date();
var offset = local.getTimezoneOffset();
var utc = new Date(local.getTime() + offset * 60000);
document.getElementById("result").innerHTML =
"Local: " + local + "<br>" +
"UTC: " + utc;
</script>
</body>
</html>
Local: Mon Dec 09 2024 10:30:45 GMT-0500 (EST) UTC: Mon Dec 09 2024 15:30:45 GMT+0000 (UTC)
Example: Specific Local to UTC Time
<!DOCTYPE html>
<html>
<body>
<div id="result"></div>
<script>
var local = new Date("2023-12-25 12:00:00");
var offset = local.getTimezoneOffset();
var utc = new Date(local.getTime() + offset * 60000);
document.getElementById("result").innerHTML =
"Local: " + local + "<br>" +
"UTC: " + utc.toISOString();
</script>
</body>
</html>
Local: Mon Dec 25 2023 12:00:00 GMT-0500 (EST) UTC: 2023-12-25T17:00:00.000Z
Modern Approach: Using Built-in Methods
JavaScript also provides built-in methods that handle timezone conversion automatically:
<!DOCTYPE html>
<html>
<body>
<div id="result"></div>
<script>
var date = new Date();
// Built-in methods for displaying times
var utcString = date.toUTCString();
var localString = date.toLocaleString();
var isoString = date.toISOString();
document.getElementById("result").innerHTML =
"UTC String: " + utcString + "<br>" +
"Local String: " + localString + "<br>" +
"ISO String: " + isoString;
</script>
</body>
</html>
UTC String: Mon, 09 Dec 2024 15:30:45 GMT Local String: 12/9/2024, 10:30:45 AM ISO String: 2024-12-09T15:30:45.000Z
Key Points
- getTimezoneOffset() returns the difference in minutes between UTC and local time
- To convert UTC to local: subtract the offset from UTC time
- To convert local to UTC: add the offset to local time
- The offset is in minutes, so multiply by 60000 to convert to milliseconds
- Use toISOString(), toUTCString(), and toLocaleString() for formatted output
Conclusion
Converting between UTC and local time in JavaScript is straightforward using the getTimezoneOffset() method. Remember that proper timezone handling is crucial for web applications to display accurate times to users across different time zones.
32K+ Views
