Comment afficher les noms de fuseaux horaires comme PST ou Pacific Standard Time

Introduction

Lorsque vous affichez une heure aux utilisateurs, indiquer le fuseau horaire les aide à comprendre si l'heure correspond à leur fuseau local ou à un fuseau différent. Une réunion programmée pour 3:00 PM PST indique à l'utilisateur qu'il doit convertir depuis l'heure du Pacifique. Sans le libellé PST, l'utilisateur doit deviner quel fuseau horaire s'applique.

Les fuseaux horaires peuvent apparaître dans plusieurs formats. Vous pouvez afficher des noms abrégés comme PST, des noms complets comme Pacific Standard Time, ou des formats basés sur le décalage comme GMT-8. Différents formats servent différents objectifs. Les abréviations économisent de l'espace mais peuvent être ambiguës. Les noms complets sont clairs mais prennent plus de place. Les décalages fonctionnent lorsque le nom spécifique du fuseau est moins important que la différence d'heures.

JavaScript fournit l'API Intl.DateTimeFormat pour afficher automatiquement les noms de fuseaux horaires. Cette leçon explique ce que sont les noms de fuseaux horaires, comment ils changent entre l'heure standard et l'heure d'été, et comment les afficher dans différents formats.

Comprendre les formats de noms de fuseaux horaires

Les noms de fuseaux horaires apparaissent dans plusieurs formats distincts, chacun avec des caractéristiques différentes.

Les noms courts utilisent des abréviations comme PST, EST, ou JST. Celles-ci économisent de l'espace mais peuvent être ambiguës. CST pourrait signifier Central Standard Time en Amérique du Nord, China Standard Time, ou Cuba Standard Time.

Les noms longs épellent le nom complet du fuseau horaire comme Pacific Standard Time, Eastern Standard Time, ou Japan Standard Time. Ceux-ci évitent l'ambiguïté mais prennent plus d'espace.

Les noms génériques font référence au fuseau horaire sans préciser s'il observe actuellement l'heure standard ou l'heure d'été. PT signifie heure du Pacifique, qui peut être soit PST soit PDT selon la date.

Les formats de décalage indiquent la différence horaire par rapport à UTC. GMT-8 signifie 8 heures de retard par rapport à l'heure de Greenwich. GMT-05:00 signifie 5 heures de retard avec deux-points séparant les heures et les minutes.

Le format que vous choisissez dépend de votre cas d'usage. Utilisez les noms courts lorsque l'espace est limité et que l'ambiguïté est acceptable. Utilisez les noms longs lorsque la clarté importe plus que l'espace. Utilisez les décalages lorsque vous devez afficher la relation numérique avec UTC.

Utiliser Intl.DateTimeFormat pour afficher les noms de fuseaux horaires

Le constructeur Intl.DateTimeFormat accepte une option timeZoneName qui contrôle la façon dont les noms de fuseaux horaires apparaissent dans les dates et heures formatées.

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'short',
  year: 'numeric',
  month: 'numeric',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric'
});

const date = new Date('2025-01-15T15:30:00Z');
console.log(formatter.format(date));
// Output: "1/15/2025, 7:30 AM PST"

Cela crée un formateur pour l'anglais américain qui affiche l'heure dans le fuseau horaire America/Los_Angeles. L'option timeZoneName: 'short' ajoute le nom abrégé du fuseau horaire à la sortie. Le résultat inclut PST à la fin.

L'option timeZone définit le fuseau horaire à utiliser lors du formatage. L'option timeZoneName contrôle si et comment afficher le nom du fuseau horaire. Ces deux options fonctionnent ensemble. Le timeZone détermine la conversion, tandis que timeZoneName détermine l'étiquette.

Afficher les noms de fuseaux horaires courts

L'option timeZoneName: 'short' affiche les noms de fuseaux horaires abrégés.

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/New_York',
  timeZoneName: 'short',
  year: 'numeric',
  month: 'numeric',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric'
});

const date = new Date('2025-01-15T15:30:00Z');
console.log(formatter.format(date));
// Output: "1/15/2025, 10:30 AM EST"

Le format court produit EST pour l'heure normale de l'Est. Ce format est compact et fonctionne bien dans les tableaux, listes ou autres mises en page à espace limité.

Différents fuseaux horaires produisent différentes abréviations.

const date = new Date('2025-01-15T15:30:00Z');

const formatters = [
  { timeZone: 'America/Los_Angeles', name: 'Pacific' },
  { timeZone: 'America/Chicago', name: 'Central' },
  { timeZone: 'America/New_York', name: 'Eastern' },
  { timeZone: 'Europe/London', name: 'London' },
  { timeZone: 'Asia/Tokyo', name: 'Tokyo' }
];

formatters.forEach(({ timeZone, name }) => {
  const formatter = new Intl.DateTimeFormat('en-US', {
    timeZone: timeZone,
    timeZoneName: 'short',
    hour: 'numeric',
    minute: 'numeric'
  });
  console.log(`${name}: ${formatter.format(date)}`);
});
// Output:
// Pacific: 7:30 AM PST
// Central: 9:30 AM CST
// Eastern: 10:30 AM EST
// London: 3:30 PM GMT
// Tokyo: 12:30 AM JST

Chaque fuseau horaire produit son abréviation standard. Le Pacifique utilise PST, le Centre utilise CST, l'Est utilise EST, Londres utilise GMT, et Tokyo utilise JST.

Affichage des noms de fuseaux horaires longs

L'option timeZoneName: 'long' affiche les noms complets des fuseaux horaires.

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'long',
  year: 'numeric',
  month: 'numeric',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric'
});

const date = new Date('2025-01-15T15:30:00Z');
console.log(formatter.format(date));
// Output: "1/15/2025, 7:30 AM Pacific Standard Time"

Le format long produit Pacific Standard Time au lieu de PST. Cela élimine l'ambiguïté mais prend beaucoup plus d'espace.

Les noms longs fonctionnent bien lorsque la clarté est essentielle et que l'espace est disponible.

const date = new Date('2025-01-15T15:30:00Z');

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/New_York',
  timeZoneName: 'long',
  hour: 'numeric',
  minute: 'numeric'
});

console.log(formatter.format(date));
// Output: "10:30 AM Eastern Standard Time"

Le nom complet indique clairement quel fuseau horaire s'applique sans obliger l'utilisateur à décoder une abréviation.

Affichage des décalages de fuseaux horaires

L'option timeZoneName: 'shortOffset' affiche le décalage UTC dans un format compact.

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'shortOffset',
  hour: 'numeric',
  minute: 'numeric'
});

const date = new Date('2025-01-15T15:30:00Z');
console.log(formatter.format(date));
// Output: "7:30 AM GMT-8"

Cela affiche GMT-8 pour indiquer que le fuseau horaire est 8 heures en retard sur UTC. Le format de décalage fonctionne bien lorsque le nom spécifique du fuseau horaire est moins important que la relation numérique avec UTC.

L'option timeZoneName: 'longOffset' affiche le décalage avec les heures et les minutes.

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'longOffset',
  hour: 'numeric',
  minute: 'numeric'
});

const date = new Date('2025-01-15T15:30:00Z');
console.log(formatter.format(date));
// Output: "7:30 AM GMT-08:00"

Cela affiche GMT-08:00 avec deux-points entre les heures et les minutes. Ce format est plus précis et suit les conventions ISO 8601.

Les fuseaux horaires avec des décalages de demi-heure ou 45 minutes affichent le décalage complet en format long.

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'Asia/Kolkata',
  timeZoneName: 'longOffset',
  hour: 'numeric',
  minute: 'numeric'
});

const date = new Date('2025-01-15T15:30:00Z');
console.log(formatter.format(date));
// Output: "9:00 PM GMT+05:30"

Le fuseau horaire de l'Inde a un décalage de 5 heures et 30 minutes par rapport à l'UTC. Le format de décalage long affiche cela comme GMT+05:30.

Affichage des noms de fuseaux horaires génériques

L'option timeZoneName: 'shortGeneric' affiche une abréviation générique qui s'applique indépendamment de l'activation de l'heure d'été.

const winterFormatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'shortGeneric',
  hour: 'numeric',
  minute: 'numeric'
});

const summerFormatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'shortGeneric',
  hour: 'numeric',
  minute: 'numeric'
});

const winterDate = new Date('2025-01-15T15:30:00Z');
const summerDate = new Date('2025-07-15T15:30:00Z');

console.log(winterFormatter.format(winterDate));
// Output: "7:30 AM PT"

console.log(summerFormatter.format(summerDate));
// Output: "8:30 AM PT"

Les dates d'hiver et d'été affichent toutes deux PT pour l'heure du Pacifique. Le format générique ne fait pas de distinction entre l'heure normale du Pacifique et l'heure d'été du Pacifique. Cela fonctionne lorsque vous souhaitez un libellé cohérent quelle que soit la saison.

L'option timeZoneName: 'longGeneric' fournit le nom générique complet.

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'longGeneric',
  hour: 'numeric',
  minute: 'numeric'
});

const date = new Date('2025-01-15T15:30:00Z');
console.log(formatter.format(date));
// Output: "7:30 AM Pacific Time"

Cela affiche Pacific Time au lieu de Pacific Standard Time. Le format générique long apporte de la clarté sans spécifier l'heure normale ou l'heure d'été.

Comment l'heure d'été affecte les noms de fuseaux horaires

Les noms de fuseaux horaires changent entre l'heure normale et l'heure d'été. L'option timeZoneName reflète ce changement automatiquement.

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'short',
  hour: 'numeric',
  minute: 'numeric'
});

const winterDate = new Date('2025-01-15T15:30:00Z');
const summerDate = new Date('2025-07-15T15:30:00Z');

console.log(formatter.format(winterDate));
// Output: "7:30 AM PST"

console.log(formatter.format(summerDate));
// Output: "8:30 AM PDT"

En janvier, le formateur affiche PST pour l'heure normale du Pacifique. En juillet, il affiche PDT pour l'heure d'été du Pacifique. Le formateur sélectionne automatiquement le nom correct en fonction de la date.

Le décalage change également entre l'heure normale et l'heure d'été.

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'shortOffset',
  hour: 'numeric',
  minute: 'numeric'
});

const winterDate = new Date('2025-01-15T15:30:00Z');
const summerDate = new Date('2025-07-15T15:30:00Z');

console.log(formatter.format(winterDate));
// Output: "7:30 AM GMT-8"

console.log(formatter.format(summerDate));
// Output: "8:30 AM GMT-7"

En hiver, l'heure du Pacifique est GMT-8. En été, elle est GMT-7. Le décalage change d'une heure lorsque l'heure d'été commence.

Les noms longs reflètent également le changement.

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'long',
  hour: 'numeric',
  minute: 'numeric'
});

const winterDate = new Date('2025-01-15T15:30:00Z');
const summerDate = new Date('2025-07-15T15:30:00Z');

console.log(formatter.format(winterDate));
// Output: "7:30 AM Pacific Standard Time"

console.log(formatter.format(summerDate));
// Output: "8:30 AM Pacific Daylight Time"

Le format long passe de Pacific Standard Time à Pacific Daylight Time. Le formateur gère ces transitions automatiquement en fonction de la date et du fuseau horaire.

Afficher les noms de fuseaux horaires dans différentes langues

Les noms de fuseaux horaires s'affichent différemment selon les langues. L'identifiant de locale détermine quelle langue le formateur utilise pour les noms de fuseaux horaires.

const date = new Date('2025-01-15T15:30:00Z');

const enFormatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'long',
  hour: 'numeric',
  minute: 'numeric'
});

const esFormatter = new Intl.DateTimeFormat('es-ES', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'long',
  hour: 'numeric',
  minute: 'numeric'
});

const frFormatter = new Intl.DateTimeFormat('fr-FR', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'long',
  hour: 'numeric',
  minute: 'numeric'
});

console.log(enFormatter.format(date));
// Output: "7:30 AM Pacific Standard Time"

console.log(esFormatter.format(date));
// Output: "7:30 hora estándar del Pacífico"

console.log(frFormatter.format(date));
// Output: "07:30 heure normale du Pacifique"

L'anglais affiche Pacific Standard Time. L'espagnol affiche hora estándar del Pacífico. Le français affiche heure normale du Pacifique. Chaque langue utilise sa propre traduction pour le nom du fuseau horaire.

Les noms courts restent souvent identiques d'une langue à l'autre car ce sont des abréviations.

const date = new Date('2025-01-15T15:30:00Z');

const enFormatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'short',
  hour: 'numeric',
  minute: 'numeric'
});

const esFormatter = new Intl.DateTimeFormat('es-ES', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'short',
  hour: 'numeric',
  minute: 'numeric'
});

console.log(enFormatter.format(date));
// Output: "7:30 AM PST"

console.log(esFormatter.format(date));
// Output: "7:30 PST"

L'anglais et l'espagnol utilisent tous deux PST pour l'abréviation courte. Cependant, l'espagnol omets l'indicateur AM dans cet exemple car les conventions de formatage espagnoles diffèrent de l'anglais.

Les décalages restent numériques dans toutes les langues.

const date = new Date('2025-01-15T15:30:00Z');

const enFormatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'longOffset',
  hour: 'numeric',
  minute: 'numeric'
});

const jaFormatter = new Intl.DateTimeFormat('ja-JP', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'longOffset',
  hour: 'numeric',
  minute: 'numeric'
});

console.log(enFormatter.format(date));
// Output: "7:30 AM GMT-08:00"

console.log(jaFormatter.format(date));
// Output: "7:30 GMT-08:00"

L'anglais et le japonais affichent tous deux GMT-08:00 pour le décalage. Les décalages numériques ne nécessitent pas de traduction.

Afficher uniquement le nom du fuseau horaire

Vous pouvez afficher uniquement le nom du fuseau horaire en omettant les autres composants de date et d'heure.

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'long'
});

const date = new Date('2025-01-15T15:30:00Z');
console.log(formatter.format(date));
// Output: "Pacific Standard Time"

Lorsque vous spécifiez uniquement timeZoneName sans autres options, le formateur affiche uniquement le nom du fuseau horaire. Cela fonctionne lorsque vous devez afficher le fuseau horaire séparément de la date et de l'heure.

Vous pouvez utiliser ceci pour créer des étiquettes ou des légendes.

const timeZones = [
  'America/Los_Angeles',
  'America/Chicago',
  'America/New_York',
  'Europe/London',
  'Asia/Tokyo'
];

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZoneName: 'long'
});

const date = new Date();

timeZones.forEach(timeZone => {
  formatter = new Intl.DateTimeFormat('en-US', {
    timeZone: timeZone,
    timeZoneName: 'long'
  });
  console.log(formatter.format(date));
});
// Output:
// Pacific Standard Time (or Pacific Daylight Time depending on date)
// Central Standard Time (or Central Daylight Time depending on date)
// Eastern Standard Time (or Eastern Daylight Time depending on date)
// Greenwich Mean Time (or British Summer Time depending on date)
// Japan Standard Time

Cela crée une liste de noms de fuseaux horaires adaptée à l'affichage dans un menu déroulant ou une interface de sélection.

Combiner les noms de fuseaux horaires avec des formats de date spécifiques

Vous pouvez combiner les noms de fuseaux horaires avec des options de formatage de date et d'heure spécifiques.

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/New_York',
  timeZoneName: 'short',
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric'
});

const date = new Date('2025-01-15T15:30:00Z');
console.log(formatter.format(date));
// Output: "Wednesday, January 15, 2025, 10:30 AM EST"

Cela combine un format de date complet avec le nom court du fuseau horaire. Le résultat inclut le jour de la semaine, le nom complet du mois, le jour, l'année, l'heure et l'abréviation du fuseau horaire.

Vous pouvez utiliser ceci pour créer des affichages complets de date et heure.

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'long',
  dateStyle: 'full',
  timeStyle: 'long'
});

const date = new Date('2025-01-15T15:30:00Z');
console.log(formatter.format(date));
// Output: "Wednesday, January 15, 2025 at 7:30:00 AM Pacific Standard Time"

Notez que l'option timeZoneName ne peut pas être utilisée avec dateStyle ou timeStyle. Si vous devez utiliser des raccourcis de style, le nom du fuseau horaire est déjà inclus dans les styles d'heure long et full.

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  dateStyle: 'full',
  timeStyle: 'long'
});

const date = new Date('2025-01-15T15:30:00Z');
console.log(formatter.format(date));
// Output: "Wednesday, January 15, 2025 at 7:30:00 AM PST"

Le style d'heure long inclut automatiquement le nom abrégé du fuseau horaire. Vous n'avez pas besoin de spécifier timeZoneName séparément.

Afficher les noms de fuseaux horaires pour les plannings d'événements

Les noms de fuseaux horaires aident les utilisateurs à comprendre quand les événements se produisent dans différentes régions.

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZoneName: 'short',
  month: 'short',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric'
});

const events = [
  { name: 'Kickoff Meeting', time: '2025-03-15T14:00:00Z', timeZone: 'America/New_York' },
  { name: 'Design Review', time: '2025-03-15T17:00:00Z', timeZone: 'America/Los_Angeles' },
  { name: 'Sprint Planning', time: '2025-03-16T01:00:00Z', timeZone: 'Asia/Tokyo' }
];

events.forEach(event => {
  const localFormatter = new Intl.DateTimeFormat('en-US', {
    timeZone: event.timeZone,
    timeZoneName: 'short',
    month: 'short',
    day: 'numeric',
    hour: 'numeric',
    minute: 'numeric'
  });

  const date = new Date(event.time);
  console.log(`${event.name}: ${localFormatter.format(date)}`);
});
// Output:
// Kickoff Meeting: Mar 15, 9:00 AM EST
// Design Review: Mar 15, 9:00 AM PST
// Sprint Planning: Mar 16, 10:00 AM JST

Chaque événement s'affiche avec son fuseau horaire local. Les utilisateurs peuvent voir que la réunion de lancement est à 9h00 heure de l'Est, la revue de conception est à 9h00 heure du Pacifique et la planification du sprint est à 10h00 heure du Japon.

Vous pouvez également afficher le même événement dans plusieurs fuseaux horaires.

const meetingTime = new Date('2025-03-15T17:00:00Z');

const timeZones = [
  { zone: 'America/Los_Angeles', label: 'Pacific' },
  { zone: 'America/Chicago', label: 'Central' },
  { zone: 'America/New_York', label: 'Eastern' },
  { zone: 'Europe/London', label: 'London' }
];

console.log('Global Team Meeting:');
timeZones.forEach(({ zone, label }) => {
  const formatter = new Intl.DateTimeFormat('en-US', {
    timeZone: zone,
    timeZoneName: 'short',
    hour: 'numeric',
    minute: 'numeric'
  });
  console.log(`${label}: ${formatter.format(meetingTime)}`);
});
// Output:
// Global Team Meeting:
// Pacific: 9:00 AM PST
// Central: 11:00 AM CST
// Eastern: 12:00 PM EST
// London: 5:00 PM GMT

Ceci affiche l'heure d'une seule réunion convertie en plusieurs fuseaux horaires. Les membres de l'équipe dans différentes régions peuvent trouver rapidement leur heure locale.