Convert Date to another timezone in JavaScript and Print with Correct Timezone

Question

I need to convert a local timezone to Pacific/Los angeles.

Example, if user in Hawaii

Code: taken here from https://stackoverflow.com/a/54127122/15358601

function convertTZ(date, tzString) {
    return new Date((typeof date === "string" ? New Date(date) : date).toLocaleString("en-US", {timeZone: tzString}));   
}

convertTZ(new Date(), "America/Los_Angeles")

Sun Mar 14 2021 17:01:59 GMT-1000 (Hawaii-Aleutian Standard Time) {}

It still prints the final with Hawaii. I need America/Los Angeles Display, not Hawaii. (however it still prints the correct new Hours and Minutes, just the Display label is incorrect) How can this be done?

The solution should work for other timezones also, printing it respectively its other timezone, eg: America/New_York, Europe/London, Europe/Paris, etc,

Answer 1

A few things:

• The approach in the answer you linked to for the convertTZ is flawed. One should not parse the output of toLocalString with the Date constructor. Please read the comments following that answer.

• The Date object can not be converted to another time zone, because it is not actually in any time zone. The only thing encapsulated by the Date object is its Unix timestamp, which can be seen with .valueOf() , .getTime() , or any mechanism that coerces it to a Number . Such values are always UTC-based.

• When you see local time or a time zone coming from the Date object, the system's local time zone is applied to the internal UTC-based Unix Timestamp to create the output. The local time zone cannot be changed programmatically from JavaScript (or TypeScript), nor can it be altered on a per-object basis.

• Instead of trying to convert a Date object in one time zone to a Date object in another time zone, recognize that all Date objects are inherently UTC. Thus, you can create a string that is in a different time zone, (for example, using toLocaleString with the timeZone option) but you cannot create a new Date object from that string. If you want an object that can actually be set to a different time zone, consider Luxon . If you need a solution without a library, you will one day be able to use a ZonedDateTime from the TC39 Temporal Proposal , which will eventually be part of ECMAScript.

• Beware of calling console.log on a Date object. Neither the ECMAScript spec nor the WhatWG Console spec defines the behavior of such a call. It is undefined behavior. In some environments, the string output logged is the same as calling .toString() on the Date object - which will give the local time equivalent of the Date object's timestamp, along with a display name for the local time zone. Other environments will show the same output of calling .toISOString() , which will give an ISO-8601 representation of the timestamp in UTC. Instead of logging Date objects, call one of those two functions yourself and log the output.

Answer 2

function convertTZ() {
    return new Date().toLocaleString('en-US', { timeZone: "America/Los_Angeles" });
}
console.log(convertTZ());

//Second way
//Hoepfully that's going to be the code that you need.You can change the way that you want to see the date.
function convertTZ() {
    return new Date().toLocaleString('en-US', {
    timeZone: "America/Los_Angeles" ,
  day: "numeric",
  month: "short",
  year: "numeric",
  hour: "numeric",
  minute: "2-digit"
});
}
console.log(convertTZ(),' America/Los Angeles');

Answer 3

As per your requirement, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/resolvedOptions will help to achieve it.