So zeigen Sie Zeitzonennamen wie PST oder Pacific Standard Time an

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 liegt. Ein für 3:00 PM PST geplantes Meeting teilt dem Benutzer mit, dass er von der pazifischen Zeit umrechnen muss. Ohne die Kennzeichnung PST muss der Benutzer raten, welche Zeitzone gilt.

Zeitzonen können in mehreren 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 klar, benötigen aber mehr Raum. Offsets funktionieren, wenn der spezifische Zonenname weniger wichtig ist als die Stundendifferenz.

JavaScript stellt die Intl.DateTimeFormat-API bereit, um Zeitzonennamen automatisch anzuzeigen. Diese Lektion erklärt, was Zeitzonennamen sind, wie sie sich zwischen Normalzeit und Sommerzeit ändern und wie man sie in verschiedenen Formaten anzeigt.

Zeitzonennamen-Formate 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.

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

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

Offset-Formate zeigen die Stundendifferenz zu UTC. GMT-8 bedeutet 8 Stunden hinter der Greenwich Mean Time. GMT-05:00 bedeutet 5 Stunden zurück, wobei Stunden und Minuten durch einen Doppelpunkt getrennt sind.

Das gewählte Format hängt von Ihrem Anwendungsfall ab. Verwenden Sie kurze Namen, 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 zu UTC anzeigen müssen.

Verwendung von Intl.DateTimeFormat zur Anzeige von Zeitzonennamen

Der Intl.DateTimeFormat-Konstruktor akzeptiert eine timeZoneName-Option, 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 America/Los_Angeles-Zeitzone anzeigt. Die timeZoneName: 'short'-Option fügt den abgekürzten Zeitzonennamen zur Ausgabe hinzu. Das Ergebnis enthält PST am Ende.

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

Anzeige kurzer Zeitzonennamen

Die timeZoneName: 'short'-Option 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 Kurzformat 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.

Anzeige langer 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 Langformat erzeugt Pacific Standard Time anstelle von PST. Dies beseitigt Mehrdeutigkeiten, benötigt jedoch deutlich mehr Platz.

Lange Namen eignen sich gut, wenn Klarheit essenziell ist und ausreichend Platz verfügbar ist.

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.

Anzeige von Zeitzonen-Offsets

Die Option timeZoneName: 'shortOffset' zeigt den UTC-Offset 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 anzugeben, dass die Zeitzone 8 Stunden hinter UTC liegt. Das Offset-Format eignet sich gut, wenn der spezifische Zeitzonenname weniger wichtig ist als die numerische Beziehung zu UTC.

Die Option timeZoneName: 'longOffset' zeigt den Offset 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 Offsets zeigen den vollständigen Offset im Langformat 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"

India Standard Time hat einen Offset von 5 Stunden und 30 Minuten zu UTC. Das lange Offset-Format zeigt dies als GMT+05:30 an.

Anzeige generischer Zeitzonennamen

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

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 funktioniert, wenn Sie unabhängig von der Jahreszeit eine konsistente Bezeichnung 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 Zeitzonennamen beeinflusst

Zeitzonennamen ändern sich zwischen Normalzeit 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.

Der Offset ändert sich ebenfalls zwischen Normal- 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 Pacific Time GMT-8. Im Sommer ist es 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 behandelt diese Übergänge automatisch basierend auf Datum und Zeitzone.

Anzeige von Zeitzonennamen in verschiedenen Sprachen

Zeitzonennamen werden in verschiedenen Sprachen unterschiedlich angezeigt. Der Locale-Identifier bestimmt, welche Sprache der Formatter 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 sprachübergreifend 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 Kurzabkürzung. Spanisch lässt jedoch in diesem Beispiel den AM-Indikator weg, da sich die spanischen Formatierungskonventionen von den englischen unterscheiden.

Offsets 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 den Offset an. Numerische Offsets erfordern keine Übersetzung.

Anzeige 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 Labels 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 ist.

Kombination 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 umfasst 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 Zeitangaben 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 Stil-Shortcuts 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.

Anzeige von Zeitzonennamen für Veranstaltungspläne

Zeitzonennamen helfen Benutzern zu verstehen, wann Veranstaltungen 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

Jede Veranstaltung wird mit ihrer lokalen Zeitzone angezeigt. Benutzer können sehen, dass das Kickoff-Meeting um 9:00 Uhr Eastern, das Design-Review um 9:00 Uhr Pacific und die Sprint-Planung um 10:00 Uhr japanischer Zeit stattfindet.

Sie können auch dieselbe Veranstaltung 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.