TIMEZONE CONVERTER

Standalone, zero-dependency JavaScript implementation powering this tool. Free to inspect, copy, and build upon.

const TIMEZONES = [
    'Africa/Cairo','Africa/Lagos','Africa/Nairobi','America/Anchorage','America/Argentina/Buenos_Aires',
    'America/Chicago','America/Denver','America/Los_Angeles','America/Mexico_City','America/New_York',
    'America/Phoenix','America/Sao_Paulo','America/Toronto','America/Vancouver','Asia/Baghdad',
    'Asia/Bangkok','Asia/Calcutta','Asia/Dubai','Asia/Hong_Kong','Asia/Jakarta','Asia/Jerusalem',
    'Asia/Karachi','Asia/Kolkata','Asia/Kuala_Lumpur','Asia/Manila','Asia/Seoul','Asia/Shanghai',
    'Asia/Singapore','Asia/Taipei','Asia/Tehran','Asia/Tokyo','Asia/Yangon','Atlantic/Azores',
    'Australia/Adelaide','Australia/Brisbane','Australia/Darwin','Australia/Melbourne','Australia/Perth',
    'Australia/Sydney','Europe/Amsterdam','Europe/Athens','Europe/Berlin','Europe/Brussels',
    'Europe/Budapest','Europe/Copenhagen','Europe/Dublin','Europe/Helsinki','Europe/Istanbul',
    'Europe/Kiev','Europe/Lisbon','Europe/London','Europe/Madrid','Europe/Moscow','Europe/Oslo',
    'Europe/Paris','Europe/Prague','Europe/Rome','Europe/Sofia','Europe/Stockholm','Europe/Vienna',
    'Europe/Warsaw','Europe/Zurich','Pacific/Auckland','Pacific/Fiji','Pacific/Honolulu','UTC'
  ];

  const CITIES = [
    { name: 'London', tz: 'Europe/London' },
    { name: 'New York', tz: 'America/New_York' },
    { name: 'Los Angeles', tz: 'America/Los_Angeles' },
    { name: 'São Paulo', tz: 'America/Sao_Paulo' },
    { name: 'Paris', tz: 'Europe/Paris' },
    { name: 'Berlin', tz: 'Europe/Berlin' },
    { name: 'Moscow', tz: 'Europe/Moscow' },
    { name: 'Dubai', tz: 'Asia/Dubai' },
    { name: 'Mumbai', tz: 'Asia/Kolkata' },
    { name: 'Singapore', tz: 'Asia/Singapore' },
    { name: 'Tokyo', tz: 'Asia/Tokyo' },
    { name: 'Sydney', tz: 'Australia/Sydney' },
  ];

  function getOffset(tz) {
    try {
      const s = new Date().toLocaleString('en-US', { timeZone: tz, timeZoneName: 'shortOffset' });
      const m = s.match(/GMT([+-]\d+(?::\d+)?)/);
      return m ? 'UTC' + m[1] : 'UTC';
    } catch { return ''; }
  }

  // Populate selects
  const selFrom = document.getElementById('tzFrom');
  const selTo = document.getElementById('tzTo');
  const userTz = Intl.DateTimeFormat().resolvedOptions().timeZone;
  TIMEZONES.forEach(tz => {
    selFrom.add(new Option(tz, tz, false, tz === userTz || tz === 'UTC'));
    selTo.add(new Option(tz, tz, false, tz === 'America/New_York'));
  });
  if (userTz && TIMEZONES.includes(userTz)) selFrom.value = userTz;

  // Set current time
  const now = new Date();
  const local = new Date(now.getTime() - now.getTimezoneOffset() * 60000).toISOString().slice(0,16);
  document.getElementById('sourceTime').value = local;

  function convert() {
    const val = document.getElementById('sourceTime').value;
    const fromTz = document.getElementById('tzFrom').value;
    const toTz = document.getElementById('tzTo').value;
    if (!val) { document.getElementById('resultBlock').style.display = 'none'; return; }

    // Parse local input as if it's in fromTz — use Intl workaround
    const srcDate = new Date(val);
    const fmt = (tz) => new Intl.DateTimeFormat('en-US', {
      timeZone: tz, hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false
    }).format(srcDate);
    const dateFmt = (tz) => new Intl.DateTimeFormat('en-US', {
      timeZone: tz, weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'
    }).format(srcDate);

    document.getElementById('resultTimeStr').textContent = fmt(toTz);
    document.getElementById('resultTzLabel').textContent = toTz.replace(/_/g, ' ');
    document.getElementById('resultDateStr').textContent = dateFmt(toTz) + ' · ' + getOffset(toTz);
    document.getElementById('resultBlock').style.display = '';
  }

  function updateWorldClock() {
    const now = new Date();
    const html = CITIES.map(c => {
      const timeFmt = new Intl.DateTimeFormat('en-US', { timeZone: c.tz, hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false });
      const dateFmt = new Intl.DateTimeFormat('en-US', { timeZone: c.tz, weekday: 'short', month: 'short', day: 'numeric' });
      return `<div class="city-card">
        <div class="city-name">${c.name}</div>
        <div class="city-time">${timeFmt.format(now)}</div>
        <div class="city-date">${dateFmt.format(now)}</div>
        <div class="city-offset">${getOffset(c.tz)}</div>
      </div>`;
    }).join('');
    document.getElementById('worldClock').innerHTML = html;
  }

  convert();
  updateWorldClock();
  setInterval(updateWorldClock, 1000);