JavaScript Clock for Different Time Zones

JavaScript can display the same instant in different world time zones with Intl.DateTimeFormat or toLocaleString(). Use an IANA time-zone identifier such as Asia/Kolkata, Europe/London or America/New_York; do not manually add fixed hour offsets when daylight-saving rules may apply.

const formatter = new Intl.DateTimeFormat("en-US", {
  timeZone: "Asia/Kolkata",
  dateStyle: "medium",
  timeStyle: "medium"
});
console.log(formatter.format(new Date()));

Live Time-Zone Clock Top ↑

Using Intl.DateTimeFormat Top ↑

Intl.DateTimeFormat formats an instant for a locale and time zone without changing the underlying Date.

const date = new Date();
const london = new Intl.DateTimeFormat("en-GB", {
  timeZone: "Europe/London",
  dateStyle: "full",
  timeStyle: "long"
});
console.log(london.format(date));

IANA Time-Zone Identifiers Top ↑

Named zones encode regional time rules. See the JavaScript time-zone list for a copyable array. Modern browsers may also expose the supported zone list directly:

const zones = Intl.supportedValuesOf("timeZone");
console.log(zones.slice(0, 5));

If you need a server-generated list, PHP also provides timezone_identifiers_list().

Daylight Saving Time and UTC Offsets Top ↑

A fixed value such as UTC−5 does not fully describe America/New_York, because its effective offset can change during the year. Formatting with the named zone allows the runtime to apply the appropriate rule for that date.

const winter = new Date("2026-01-15T12:00:00Z");
const summer = new Date("2026-07-15T12:00:00Z");

const format = new Intl.DateTimeFormat("en-US", {
  timeZone: "America/New_York",
  timeZoneName: "longOffset",
  hour: "2-digit",
  minute: "2-digit"
});

console.log(format.format(winter));
console.log(format.format(summer));

Reuse a Formatter for a Live Clock Top ↑

When you repeatedly format with the same options, create the formatter once and reuse it rather than rebuilding it every second.

const formatter = new Intl.DateTimeFormat(undefined, {
  timeZone: "Asia/Tokyo",
  timeStyle: "medium"
});

setInterval(() => {
  console.log(formatter.format(new Date()));
}, 1000);

Formatting Individual Date/Time Parts Top ↑

formatToParts() is useful when you need custom markup but still want locale-aware values.

const formatter = new Intl.DateTimeFormat("en-US", {
  timeZone: "Asia/Kolkata",
  hour: "2-digit",
  minute: "2-digit",
  second: "2-digit"
});

console.log(formatter.formatToParts(new Date()));

Handling an Invalid Time Zone Top ↑

An unsupported/invalid time-zone identifier can throw a RangeError. If the value comes from a user or external source, validate it or handle the exception.

try {
  const formatter = new Intl.DateTimeFormat("en-US", {
    timeZone: "Not/A_Zone"
  });
  console.log(formatter.format(new Date()));
} catch (error) {
  console.error(error.name);
}

Common Time-Zone Clock Mistakes Top ↑

• Manually adding a fixed number of hours instead of using a named time zone.
• Creating a second fake Date by parsing a formatted locale string.
• Recreating expensive formatting options on every timer tick unnecessarily.
• Assuming every region observes daylight saving time.
• Confusing a time-zone abbreviation with a stable IANA identifier.

Open compact time-zone demo JavaScript clock

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: