Horloge des fuseaux

LES VILLES

Des identifiants officiels, pas des décalages fixes comme +1 ou +9.

const VILLES = [['Bruxelles', 'Europe/Brussels'], ['Genève', 'Europe/Zurich'],
                ['Montréal', 'America/Toronto'], ['Tokyo', 'Asia/Tokyo']];

AFFICHER UNE HEURE DANS UN FUSEAU

Un seul instant, plusieurs façons de l'afficher.

function heure(instant, fuseau) {
  return new Intl.DateTimeFormat('fr-BE', {
    timeZone: fuseau, hour: '2-digit', minute: '2-digit', weekday: 'short', hourCycle: 'h23',
  }).format(instant);
}

L'ÉCART AVEC UTC

On relit les morceaux de la date dans le fuseau, et on compare à l'instant réel.

function ecart(fuseau, instant) {
  const p = {};
  new Intl.DateTimeFormat('en-US', { timeZone: fuseau, hourCycle: 'h23', year: 'numeric',
    month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' })
    .formatToParts(instant).forEach(x => (p[x.type] = x.value));
  const local = Date.UTC(p.year, p.month - 1, p.day, p.hour, p.minute);
  return Math.round((local - instant.getTime()) / 60000);   // en minutes
}

LA DIFFÉRENCE ENTRE DEUX VILLES

Calculée à l'instant affiché : pendant trois semaines par an, Bruxelles et Montréal n'ont pas leur écart habituel.

const diff = (a, b, instant) => (ecart(b, instant) - ecart(a, instant)) / 60;

PLANIFIER

Le curseur décale l'instant, pas les fuseaux.

const decalage = Number(curseur.value);                 // en heures
const instant = new Date(Date.now() + decalage * 3600000);
for (const [nom, fuseau] of VILLES) console.log(nom, heure(instant, fuseau));