Wie man Zeitzonennamen wie PST oder Pacific Standard Time anzeigt

Einführung

Wenn Sie Benutzern eine Uhrzeit anzeigen, hilft die Angabe der Zeitzone ihnen zu verstehen, ob die Zeit in ihrer lokalen Zone oder in einer anderen Zone angegeben ist. Ein Meeting, das für 15:00 Uhr PST angesetzt ist, zeigt dem Benutzer, dass er von der pazifischen Zeit umrechnen muss. Ohne die Kennzeichnung PST muss der Benutzer raten, welche Zeitzone gilt.

Zeitzonen können in verschiedenen Formaten erscheinen. Sie können abgekürzte Namen wie PST, vollständige Namen wie Pacific Standard Time oder Offset-basierte Formate wie GMT-8 anzeigen. Verschiedene Formate dienen unterschiedlichen Zwecken. Abkürzungen sparen Platz, können aber mehrdeutig sein. Vollständige Namen sind eindeutig, benötigen aber mehr Platz. Offsets sind nützlich, wenn der spezifische Zonenname weniger wichtig ist als der Stundenunterschied.

JavaScript bietet die Intl.DateTimeFormat-API, um Zeitzonennamen automatisch anzuzeigen. Diese Lektion erklärt, was Zeitzonennamen sind, wie sie sich zwischen Standardzeit und Sommerzeit ändern und wie man sie in verschiedenen Formaten anzeigen kann.

Zeitzonennamensformate verstehen

Zeitzonennamen erscheinen in mehreren unterschiedlichen Formaten, jedes mit verschiedenen Eigenschaften.

Kurznamen verwenden Abkürzungen wie PST, EST oder JST. Diese sparen Platz, können aber mehrdeutig sein. CST könnte Central Standard Time in Nordamerika, China Standard Time oder Cuba Standard Time bedeuten.

Lange Namen schreiben den vollständigen Zeitzonennamen aus, wie Pacific Standard Time, Eastern Standard Time oder Japan Standard Time. Diese vermeiden Mehrdeutigkeit, benötigen aber mehr Platz.

Generische Namen beziehen sich auf die Zeitzone, ohne anzugeben, ob sie derzeit Standard- oder Sommerzeit beobachtet. PT bedeutet Pacific Time, was je nach Datum entweder PST oder PDT sein könnte.

Offset-Formate zeigen den Stundenunterschied zur UTC. GMT-8 bedeutet 8 Stunden hinter Greenwich Mean Time. GMT-05:00 bedeutet 5 Stunden hinter, wobei ein Doppelpunkt Stunden und Minuten trennt.

Das Format, das Sie wählen, hängt von Ihrem Anwendungsfall ab. Verwenden Sie Kurznamen, wenn der Platz begrenzt ist und Mehrdeutigkeit akzeptabel ist. Verwenden Sie lange Namen, wenn Klarheit wichtiger ist als Platz. Verwenden Sie Offsets, wenn Sie die numerische Beziehung zur UTC anzeigen müssen.

Verwendung von Intl.DateTimeFormat zur Anzeige von Zeitzonennamen

Der Konstruktor Intl.DateTimeFormat akzeptiert eine Option timeZoneName, die steuert, wie Zeitzonennamen in formatierten Datums- und Zeitangaben erscheinen.

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"

Dies erstellt einen Formatierer für US-Englisch, der die Zeit in der Zeitzone America/Los_Angeles anzeigt. Die Option timeZoneName: 'short' fügt den abgekürzten Zeitzonennamen zur Ausgabe hinzu. Das Ergebnis enthält am Ende PST.

Die Option timeZone legt fest, welche Zeitzone bei der Formatierung verwendet werden soll. Die Option timeZoneName steuert, ob und wie der Zeitzonenname angezeigt wird. Diese beiden Optionen arbeiten zusammen. Die timeZone bestimmt die Umrechnung, während timeZoneName die Bezeichnung bestimmt.

Anzeige von kurzen Zeitzonennamen

Die Option timeZoneName: 'short' zeigt abgekürzte Zeitzonennamen an.

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"

Das kurze Format erzeugt EST für Eastern Standard Time. Dieses Format ist kompakt und eignet sich gut für Tabellen, Listen oder andere platzbeschränkte Layouts.

Verschiedene Zeitzonen erzeugen unterschiedliche Abkürzungen.

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

Jede Zeitzone erzeugt ihre Standardabkürzung. Pacific verwendet PST, Central verwendet CST, Eastern verwendet EST, London verwendet GMT und Tokyo verwendet JST.

Anzeigen von langen Zeitzonennamen

Die Option timeZoneName: 'long' zeigt vollständige Zeitzonennamen an.

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"

Das lange Format erzeugt Pacific Standard Time anstelle von PST. Dies beseitigt Mehrdeutigkeiten, benötigt aber deutlich mehr Platz.

Lange Namen funktionieren gut, wenn Klarheit wichtig ist und ausreichend Platz zur Verfügung steht.

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"

Der vollständige Name macht deutlich, welche Zeitzone gilt, ohne dass der Benutzer eine Abkürzung entschlüsseln muss.

Anzeigen von Zeitzonenverschiebungen

Die Option timeZoneName: 'shortOffset' zeigt die UTC-Verschiebung in einem kompakten Format an.

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"

Dies zeigt GMT-8 an, um anzuzeigen, dass die Zeitzone 8 Stunden hinter UTC liegt. Das Verschiebungsformat eignet sich gut, wenn der spezifische Zeitzonenname weniger wichtig ist als die numerische Beziehung zu UTC.

Die Option timeZoneName: 'longOffset' zeigt die Verschiebung mit Stunden und Minuten an.

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"

Dies zeigt GMT-08:00 mit einem Doppelpunkt zwischen Stunden und Minuten an. Dieses Format ist präziser und folgt den ISO 8601-Konventionen.

Zeitzonen mit halbstündigen oder 45-minütigen Verschiebungen zeigen die vollständige Verschiebung im langen Format an.

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"

Die indische Standardzeit hat eine Verschiebung von 5 Stunden und 30 Minuten gegenüber UTC. Das lange Verschiebungsformat zeigt dies als GMT+05:30 an.

Anzeigen von generischen Zeitzonennamen

Die Option timeZoneName: 'shortGeneric' zeigt eine generische Abkürzung an, die unabhängig davon gilt, ob die Sommerzeit aktiv ist oder nicht.

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"

Sowohl Winter- als auch Sommerdaten zeigen PT für Pacific Time an. Das generische Format unterscheidet nicht zwischen Pacific Standard Time und Pacific Daylight Time. Dies ist nützlich, wenn Sie eine einheitliche Bezeichnung unabhängig von der Jahreszeit wünschen.

Die Option timeZoneName: 'longGeneric' liefert den vollständigen generischen Namen.

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"

Dies zeigt Pacific Time anstelle von Pacific Standard Time an. Das generische Langformat bietet Klarheit, ohne Standard- oder Sommerzeit zu spezifizieren.

Wie die Sommerzeit die Zeitzonennamen beeinflusst

Zeitzonennamen ändern sich zwischen Standardzeit und Sommerzeit. Die Option timeZoneName spiegelt diese Änderung automatisch wider.

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"

Im Januar zeigt der Formatter PST für Pacific Standard Time an. Im Juli zeigt er PDT für Pacific Daylight Time an. Der Formatter wählt automatisch den korrekten Namen basierend auf dem Datum aus.

Auch der Offset ändert sich zwischen Standard- und Sommerzeit.

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"

Im Winter ist die Pacific Time GMT-8. Im Sommer ist sie GMT-7. Der Offset ändert sich um eine Stunde, wenn die Sommerzeit beginnt.

Lange Namen spiegeln die Änderung ebenfalls wider.

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"

Das Langformat ändert sich von Pacific Standard Time zu Pacific Daylight Time. Der Formatter verarbeitet diese Übergänge automatisch basierend auf Datum und Zeitzone.

Anzeigen von Zeitzonennamen in verschiedenen Sprachen

Zeitzonennamen erscheinen in verschiedenen Sprachen unterschiedlich. Die Gebietsschema-ID bestimmt, welche Sprache der Formatierer für Zeitzonennamen verwendet.

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"

Englisch zeigt Pacific Standard Time an. Spanisch zeigt hora estándar del Pacífico an. Französisch zeigt heure normale du Pacifique an. Jede Sprache verwendet ihre eigene Übersetzung für den Zeitzonennamen.

Kurznamen bleiben oft in allen Sprachen gleich, da es sich um Abkürzungen handelt.

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"

Sowohl Englisch als auch Spanisch verwenden PST für die Kurzform. Allerdings lässt Spanisch in diesem Beispiel die AM-Angabe weg, da sich die spanischen Formatierungskonventionen von den englischen unterscheiden.

Zeitverschiebungen bleiben in allen Sprachen numerisch.

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"

Sowohl Englisch als auch Japanisch zeigen GMT-08:00 für die Zeitverschiebung an. Numerische Zeitverschiebungen müssen nicht übersetzt werden.

Anzeigen nur des Zeitzonennamens

Sie können nur den Zeitzonennamen anzeigen, indem Sie andere Datums- und Zeitkomponenten weglassen.

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"

Wenn Sie nur timeZoneName ohne andere Optionen angeben, gibt der Formatter nur den Zeitzonennamen aus. Dies funktioniert, wenn Sie die Zeitzone getrennt von Datum und Uhrzeit anzeigen müssen.

Sie können dies verwenden, um Beschriftungen oder Legenden zu erstellen.

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

Dies erstellt eine Liste von Zeitzonennamen, die für die Anzeige in einem Dropdown-Menü oder einer Auswahlschnittstelle geeignet sind.

Kombinieren von Zeitzonennamen mit spezifischen Datumsformaten

Sie können Zeitzonennamen mit spezifischen Datums- und Zeitformatierungsoptionen kombinieren.

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"

Dies kombiniert ein vollständiges Datumsformat mit dem kurzen Zeitzonennamen. Die Ausgabe enthält den Wochentag, den vollständigen Monatsnamen, den Tag, das Jahr, die Uhrzeit und die Zeitzonenabkürzung.

Sie können dies verwenden, um vollständige Datums- und Zeitanzeigen zu erstellen.

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"

Beachten Sie, dass die Option timeZoneName nicht zusammen mit dateStyle oder timeStyle verwendet werden kann. Wenn Sie Stilabkürzungen verwenden müssen, ist der Zeitzonenname bereits in den Zeitstilen long und full enthalten.

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"

Der Zeitstil long enthält automatisch den kurzen Zeitzonennamen. Sie müssen timeZoneName nicht separat angeben.

Anzeigen von Zeitzonennamen für Veranstaltungspläne

Zeitzonennamen helfen Benutzern zu verstehen, wann Ereignisse in verschiedenen Regionen stattfinden.

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

Jedes Ereignis wird mit seiner lokalen Zeitzone angezeigt. Benutzer können sehen, dass das Kickoff-Meeting um 9:00 Uhr Eastern Time, das Design-Review um 9:00 Uhr Pacific Time und das Sprint-Planning um 10:00 Uhr japanischer Zeit stattfindet.

Sie können auch dasselbe Ereignis in mehreren Zeitzonen anzeigen.

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

Dies zeigt eine einzelne Besprechungszeit, die in mehrere Zeitzonen umgerechnet wurde. Teammitglieder in verschiedenen Regionen können ihre lokale Zeit schnell finden.