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

Introduction

Lorsque vous affichez une heure aux utilisateurs, montrer le fuseau horaire les aide à comprendre si l'heure est dans leur fuseau local ou dans un autre. Une réunion programmée à 15h00 PST indique à l'utilisateur qu'il doit convertir depuis l'heure du Pacifique. Sans l'étiquette PST, l'utilisateur doit deviner quel fuseau horaire s'applique.

Les fuseaux horaires peuvent apparaître sous 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 sont utiles lorsque le nom spécifique du fuseau est moins important que la différence horaire.

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 sous plusieurs formats distincts, chacun avec des caractéristiques différentes.

Les noms courts utilisent des abréviations comme PST, EST, ou JST. Ceux-ci économisent de l'espace mais peuvent être ambigus. 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 Pacific Time, qui pourrait être soit PST soit PDT selon la date.

Les formats de décalage montrent la différence horaire par rapport à UTC. GMT-8 signifie 8 heures derrière Greenwich Mean Time. GMT-05:00 signifie 5 heures derrière avec deux-points séparant les heures et les minutes.

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

Utilisation d'Intl.DateTimeFormat pour afficher les noms de fuseaux horaires

Le constructeur Intl.DateTimeFormat accepte une option timeZoneName qui contrôle comment 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"

Ceci 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 quel 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.

Affichage des noms courts de fuseaux horaires

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

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 Eastern Standard Time. Ce format est compact et fonctionne bien dans les tableaux, les listes ou autres mises en page avec 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 significativement 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 que l'utilisateur ait besoin de 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 derrière 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 d'une demi-heure ou de 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"

L'heure normale de l'Inde a un décalage de 5 heures et 30 minutes par rapport à UTC. Le format de décalage long l'affiche 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 la distinction entre l'heure normale du Pacifique et l'heure d'été du Pacifique. Cela fonctionne lorsque vous souhaitez une étiquette cohérente 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 offre de la clarté sans spécifier l'heure normale ou l'heure d'été.

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

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

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 change de Pacific Standard Time à Pacific Daylight Time. Le formateur gère ces transitions automatiquement en fonction de la date et du fuseau horaire.

Affichage des noms de fuseaux horaires dans différentes langues

Les noms des fuseaux horaires apparaissent 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 les mêmes dans toutes les langues 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 omet 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.

Affichage du nom du fuseau horaire uniquement

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 n'affiche que 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 cela 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 (ou Pacific Daylight Time selon la date)
// Central Standard Time (ou Central Daylight Time selon la date)
// Eastern Standard Time (ou Eastern Daylight Time selon la date)
// Greenwich Mean Time (ou British Summer Time selon la 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.

Combinaison des noms de fuseaux horaires avec des formats de date spécifiques

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

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 cela pour créer des affichages complets de date et d'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 court du fuseau horaire. Vous n'avez pas besoin de spécifier timeZoneName séparément.

Affichage des 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 montre un seul horaire de réunion converti en plusieurs fuseaux horaires. Les membres de l'équipe dans différentes régions peuvent trouver rapidement leur heure locale.