Dynamic Current Time

Displays a live clock — hours, minutes, seconds, and timezone abbreviation — using Intl.DateTimeFormat with IANA timezone support. The timezone can be set per element via data-current-time or falls back to a configurable default. Updates every second.

timeclockjavascriptintltimezonedynamic

Code

index.html

html

<p data-current-time>
  <span data-current-time-hours>9</span>:
  <span data-current-time-minutes>00</span>:
  <span data-current-time-seconds>24</span>
  <span data-current-time-timezone>CET</span>
</p>

script.js

javascript

function initDynamicCurrentTime() {
  const defaultTimezone = "Europe/Amsterdam";

  const createFormatter = (timezone) => {
    return new Intl.DateTimeFormat([], {
      timeZone: timezone,
      timeZoneName: 'short',
      hour: '2-digit',
      minute: '2-digit',
      second: '2-digit',
      hour12: false,
    });
  };

  const parseFormattedTime = (formattedDateTime) => {
    const match = formattedDateTime.match(/(\d+):(\d+):(\d+)\s*([\w+]+)/);
    if (match) {
      return {
        hours: match[1],
        minutes: match[2],
        seconds: match[3],
        timezone: match[4],
      };
    }
    return null;
  };

  const updateTime = () => {
    document.querySelectorAll('[data-current-time]').forEach((element) => {
      const timezone = element.getAttribute('data-current-time') || defaultTimezone;
      const formatter = createFormatter(timezone);
      const now = new Date();
      const formattedDateTime = formatter.format(now);

      const timeParts = parseFormattedTime(formattedDateTime);
      if (timeParts) {
        const { hours, minutes, seconds, timezone } = timeParts;

        const hoursElem    = element.querySelector('[data-current-time-hours]');
        const minutesElem  = element.querySelector('[data-current-time-minutes]');
        const secondsElem  = element.querySelector('[data-current-time-seconds]');
        const timezoneElem = element.querySelector('[data-current-time-timezone]');

        if (hoursElem)    hoursElem.textContent    = hours;
        if (minutesElem)  minutesElem.textContent  = minutes;
        if (secondsElem)  secondsElem.textContent  = seconds;
        if (timezoneElem) timezoneElem.textContent = timezone;
      }
    });
  };

  updateTime();
  setInterval(updateTime, 1000);
}

// Initialize Dynamic Current Time
document.addEventListener('DOMContentLoaded', () => {
  initDynamicCurrentTime();
});

Guide

data-current-time

Add to the container element. Leave the value empty to use the default timezone defined in the script (defaultTimezone). Pass an IANA timezone identifier as the value to override per-element — e.g. data-current-time="America/New_York".

Unit Elements

Add data-current-time-hours, data-current-time-minutes, data-current-time-seconds, and data-current-time-timezone to child elements. Any combination is valid — omit seconds or the timezone span if you don't need them.

Default Timezone

Change the defaultTimezone variable at the top of the function to set the fallback for all elements that have an empty data-current-time attribute. Use any valid IANA TZ identifier.

Timezone List

A full list of IANA TZ identifiers is available on Wikipedia. Examples: Africa/Lagos, America/New_York, Asia/Tel_Aviv, Australia/West.

Multiple Clocks

Place multiple data-current-time elements on the page, each with a different timezone value, to display several world clocks simultaneously.

Back to Utilities & Scripts