JavaScript provides the toLocaleString() method to convert a UTC date and time into the user's local date and time.
Approach
- Create a Date object from the UTC date and time.
- Use toLocaleString() to convert the date into the local time zone.
- Display the converted date and time on the webpage.
Using toLocaleString() Method
The toLocaleString() method returns a date and time formatted according to the user's local time zone and locale.
Syntax:
const theDate = new Date(Date.parse('DATE_IN_UTC'));
theDate.toLocaleString();
Example 1: Convert a UTC date and time into the user's local date and time.
<!DOCTYPE html>
<html>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<p>
Click the button to convert UTC date and time
to local date and time.
</p>
<p>
UTC date and time:
06/14/2020 4:41:48 PM UTC
</p>
<button onclick="myGeeks()">
Try it
</button>
<p id="demo"></p>
<script>
function myGeeks() {
const theDate = new Date(
Date.parse('06/14/2020 4:41:48 PM UTC')
);
document.getElementById("demo").innerHTML =
"Local date Time: " + theDate.toLocaleString();
}
</script>
</body>
</html>
Output:
Example 2: Convert Current UTC Date and Time
The current UTC date and time is obtained using toUTCString() and then converted to the local date and time using toLocaleString().Â
<!DOCTYPE html>
<html>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<p>
Click the button to convert UTC date and time
to local date and time.
</p>
<p id="UTC_DATE"></p>
<button onclick="myGeeks()">
Try it
</button>
<p id="demo"></p>
<script>
const utcDate = new Date();
document.getElementById("UTC_DATE").innerHTML =
"UTC date and time: " + utcDate.toUTCString();
function myGeeks() {
const localDate = new Date();
document.getElementById("demo").innerHTML =
"Local date Time: " + localDate.toLocaleString();
}
</script>
</body>
</html>
