So formatieren Sie Datumsangaben in verschiedenen Zeitzonen

Zeigen Sie Datums- und Zeitangaben für beliebige Zeitzonen mithilfe der Intl.DateTimeFormat-API von JavaScript an

Einführung

Derselbe Zeitpunkt wird weltweit als unterschiedliche Uhrzeiten angezeigt. Wenn ein Meeting um 15:00 Uhr in New York beginnt, zeigen die Uhren in London 20:00 Uhr und die Uhren in Tokio 5:00 Uhr am nächsten Tag an. Wenn Ihre Anwendung Zeiten ohne Berücksichtigung von Zeitzonen anzeigt, sehen Benutzer falsche Informationen.

Ein Benutzer in Kalifornien, der einen Flug bucht, der um 14:00 Uhr abfliegt, erwartet, dass 14:00 Uhr angezeigt wird. Wenn Ihre Anwendung alle Zeiten unter Verwendung der Zeitzone des Servers in Virginia formatiert, sieht der Benutzer 17:00 Uhr und kommt drei Stunden zu spät am Flughafen an. Diese Verwirrung verstärkt sich bei jeder in Ihrer Anwendung angezeigten Zeit.

Die Intl.DateTimeFormat-API von JavaScript bietet die timeZone-Option zum Formatieren von Datums- und Zeitangaben für beliebige Zeitzonen. Diese Lektion erklärt, warum Zeitzonen existieren, wie JavaScript sie intern verarbeitet und wie Sie Datumsangaben für Benutzer überall auf der Welt korrekt formatieren.

Warum Zeitzonen existieren

Die Erde rotiert und erzeugt Tag und Nacht an verschiedenen Orten zu unterschiedlichen Zeiten. Wenn die Sonne über New York steht, ist sie in London bereits untergegangen und in Tokio noch nicht aufgegangen. Jeder Ort erlebt den Mittag zu einem anderen Zeitpunkt.

Vor standardisierten Zeitzonen führte jede Stadt ihre eigene Ortszeit basierend auf der Position der Sonne. Dies schuf Probleme für Eisenbahnen und Telegrafenleitungen, die entfernte Städte verbanden. Im Jahr 1884 einigten sich die Länder darauf, die Welt in Zeitzonen zu unterteilen, von denen jede etwa 15 Längengrade breit ist, was einer Stunde der Erdrotation entspricht.

Jede Zeitzone hat einen Standardversatz zur koordinierten Weltzeit, abgekürzt UTC. New York verwendet UTC-5 oder UTC-4, abhängig von der Sommerzeit. London verwendet UTC+0 oder UTC+1. Tokio verwendet ganzjährig UTC+9.

Wenn Sie Zeiten für Benutzer anzeigen, müssen Sie vom universellen Moment in die lokale Uhrzeit umrechnen, die sie erwarten.

Wie JavaScript Zeiten intern speichert

JavaScript-Date-Objekte repräsentieren einen einzelnen Moment in der Zeit als Anzahl der Millisekunden seit dem 1. Januar 1970 um Mitternacht UTC. Diese interne Darstellung hat keine Zeitzone.

const date = new Date('2025-03-15T20:00:00Z');
console.log(date.getTime());
// Output: 1742331600000

Das Z am Ende der ISO-Zeichenkette kennzeichnet UTC-Zeit. Das Date-Objekt speichert den Zeitstempel 1742331600000, der denselben Moment für alle Menschen weltweit repräsentiert, unabhängig von ihrer Zeitzone.

Wenn Sie Methoden wie toString() auf einem Date-Objekt aufrufen, konvertiert JavaScript den UTC-Zeitstempel zur Anzeige in Ihre lokale Zeitzone. Diese automatische Konvertierung kann zu Verwirrung führen, wenn Sie Zeiten für eine andere Zeitzone anzeigen möchten.

Die Intl.DateTimeFormat-API mit der timeZone-Option gibt Ihnen explizite Kontrolle darüber, welche Zeitzone für die Formatierung verwendet werden soll.

Verwendung der timeZone-Option

Die timeZone-Option gibt an, welche Zeitzone beim Formatieren eines Datums verwendet werden soll. Übergeben Sie die Option als Teil des Options-Objekts beim Erstellen eines Formatters.

const date = new Date('2025-03-15T20:00:00Z');

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

console.log(formatter.format(date));
// Output: "3/15/25, 3:00 PM"

Das Datum repräsentiert 20:00 Uhr UTC. New York liegt während der Standardzeit bei UTC-5 oder während der Sommerzeit bei UTC-4. Im März ist die Sommerzeit aktiv, sodass New York bei UTC-4 liegt. Der Formatter konvertiert 20:00 Uhr UTC in 16:00 Uhr Ortszeit, aber das Beispiel zeigt 15:00 Uhr, was darauf hindeutet, dass dies in diesem spezifischen Szenario während der Standardzeit ist.

Der Formatter übernimmt die Konvertierung automatisch. Sie geben den UTC-Zeitpunkt und die Zielzeitzone an, und die API erzeugt die korrekte Ortszeit.

IANA-Zeitzonennamen verstehen

Die Option timeZone akzeptiert Zeitzonenbezeichner aus der IANA Time Zone Database. Diese Bezeichner verwenden das Format Region/City, wie z. B. America/New_York, Europe/London oder Asia/Tokyo.

const date = new Date('2025-03-15T20:00:00Z');

const zones = [
  'America/New_York',
  'Europe/London',
  'Asia/Tokyo',
  'Australia/Sydney'
];

zones.forEach(zone => {
  const formatter = new Intl.DateTimeFormat('en-US', {
    timeZone: zone,
    dateStyle: 'short',
    timeStyle: 'long'
  });

  console.log(`${zone}: ${formatter.format(date)}`);
});

// Output:
// America/New_York: 3/15/25, 4:00:00 PM EDT
// Europe/London: 3/15/25, 8:00:00 PM GMT
// Asia/Tokyo: 3/16/25, 5:00:00 AM JST
// Australia/Sydney: 3/16/25, 7:00:00 AM AEDT

Jede Zeitzone zeigt eine andere Ortszeit für denselben Zeitpunkt. New York zeigt 16:00 Uhr am 15. März. London zeigt 20:00 Uhr am 15. März. Tokio und Sydney sind bereits zum 16. März fortgeschritten und zeigen 5:00 Uhr bzw. 7:00 Uhr.

IANA-Namen behandeln die Sommerzeit automatisch. Der Formatter weiß, dass America/New_York zwischen Eastern Standard Time und Eastern Daylight Time wechselt und wendet den korrekten Offset für jedes Datum an.

Gültige IANA-Zeitzonennamen finden

Die IANA-Datenbank enthält mehrere hundert Zeitzonenbezeichner. Häufige Muster umfassen:

  • America/New_York für New York City
  • America/Los_Angeles für Los Angeles
  • America/Chicago für Chicago
  • Europe/London für London
  • Europe/Paris für Paris
  • Europe/Berlin für Berlin
  • Asia/Tokyo für Tokio
  • {/* INLINE_CODE_PLACEHOLDER_7da3283e3470a9d2c52b0e3e75a6db */} für Shanghai
  • Asia/Kolkata für Indien
  • Australia/Sydney für Sydney
  • Pacific/Auckland für Auckland

Die Bezeichner verwenden Städtenamen anstelle von Zeitzonenabkürzungen wie EST oder PST, da Abkürzungen mehrdeutig sind. EST bedeutet Eastern Standard Time in Nordamerika, aber auch Australian Eastern Standard Time. Die städtebasierten Namen bleiben eindeutig.

Sie können die vollständige Liste der Identifikatoren in der Dokumentation der IANA Time Zone Database suchen.

UTC als Zeitzone verwenden

Der spezielle Identifikator UTC formatiert Daten in koordinierter Weltzeit, die keinen Offset vom Nullmeridian hat.

const date = new Date('2025-03-15T20:00:00Z');

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'UTC',
  dateStyle: 'short',
  timeStyle: 'long'
});

console.log(formatter.format(date));
// Output: "3/15/25, 8:00:00 PM UTC"

Die UTC-Zeit entspricht dem internen Zeitstempel, der im Date-Objekt gespeichert ist. Die Verwendung von UTC zur Formatierung ist nützlich, wenn Zeiten angezeigt werden sollen, die sich nicht basierend auf dem Standort des Benutzers ändern sollen, wie z. B. Server-Logs oder Datenbank-Zeitstempel.

Die Zeitzone des Benutzers abrufen

Die Methode resolvedOptions() gibt die tatsächlichen Optionen zurück, die von einem Formatter verwendet werden, einschließlich der Zeitzone. Wenn Sie einen Formatter erstellen, ohne timeZone anzugeben, wird standardmäßig die Systemzeitzone des Benutzers verwendet.

const formatter = new Intl.DateTimeFormat();
const options = formatter.resolvedOptions();

console.log(options.timeZone);
// Output: "America/New_York" (or user's actual time zone)

Dies gibt Ihnen den IANA-Identifikator für die aktuelle Zeitzone des Benutzers. Sie können diesen Identifikator verwenden, um andere Daten in derselben Zone zu formatieren oder die Zeitzonenpräferenz des Benutzers zu speichern.

const userTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;

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

const date = new Date('2025-03-15T20:00:00Z');
console.log(formatter.format(date));
// Output varies based on user's time zone

Dieses Muster stellt sicher, dass Daten automatisch in der Ortszeit des Benutzers angezeigt werden.

Denselben Moment für mehrere Zeitzonen formatieren

Sie können dasselbe Date-Objekt für mehrere Zeitzonen formatieren, um Benutzern zu zeigen, zu welcher Zeit ein Ereignis an verschiedenen Orten stattfindet.

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

const zones = [
  { name: 'New York', zone: 'America/New_York' },
  { name: 'London', zone: 'Europe/London' },
  { name: 'Tokyo', zone: 'Asia/Tokyo' }
];

zones.forEach(({ name, zone }) => {
  const formatter = new Intl.DateTimeFormat('en-US', {
    timeZone: zone,
    dateStyle: 'long',
    timeStyle: 'short'
  });

  console.log(`${name}: ${formatter.format(meetingTime)}`);
});

// Output:
// New York: March 15, 2025 at 4:00 PM
// London: March 15, 2025 at 8:00 PM
// Tokyo: March 16, 2025 at 5:00 AM

Dies hilft Benutzern zu verstehen, wann ein Meeting oder Ereignis in ihrer Zeitzone und in den Zeitzonen anderer Teilnehmer stattfindet.

Daten ohne Uhrzeiten über Zeitzonen hinweg formatieren

Beim Formatieren von Daten ohne Uhrzeiten kann die Zeitzone beeinflussen, welches Kalenderdatum angezeigt wird. Ein Datum um Mitternacht UTC fällt in verschiedenen Zeitzonen auf unterschiedliche Kalenderdaten.

const date = new Date('2025-03-16T01:00:00Z');

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

const formatter2 = new Intl.DateTimeFormat('en-US', {
  timeZone: 'Asia/Tokyo',
  dateStyle: 'long'
});

console.log(`Los Angeles: ${formatter1.format(date)}`);
console.log(`Tokyo: ${formatter2.format(date)}`);

// Output:
// Los Angeles: March 15, 2025
// Tokyo: March 16, 2025

Der Zeitpunkt 1:00 Uhr UTC am 16. März entspricht 17:00 Uhr am 15. März in Los Angeles und 10:00 Uhr am 16. März in Tokio. Das Kalenderdatum unterscheidet sich zwischen den beiden Zeitzonen um einen Tag.

Dies ist wichtig bei der Anzeige von Daten für geplante Ereignisse, Fristen oder beliebige Daten, die Benutzer relativ zu ihrem lokalen Kalender interpretieren.

Verwendung von Zeitzonen-Offsets

Anstelle von IANA-Identifikatoren können Sie Offset-Strings wie +01:00 oder -05:00 verwenden. Diese repräsentieren feste Offsets von UTC.

const date = new Date('2025-03-15T20:00:00Z');

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: '+09:00',
  dateStyle: 'short',
  timeStyle: 'long'
});

console.log(formatter.format(date));
// Output: "3/16/25, 5:00:00 AM GMT+9"

Offset-Strings funktionieren, wenn Sie den exakten Offset kennen, aber nicht den spezifischen Standort. Sie berücksichtigen jedoch keine Sommerzeit. Wenn Sie -05:00 verwenden, um New York zu repräsentieren, sind die Zeiten während der Sommerzeit falsch, wenn New York tatsächlich -04:00 verwendet.

IANA-Identifikatoren werden bevorzugt, da sie die Sommerzeit automatisch berücksichtigen.

Funktionsweise der Sommerzeit verstehen

Viele Regionen ändern ihren Uhrzeit-Offset zweimal pro Jahr für die Sommerzeit. Im Frühling werden die Uhren eine Stunde vorgestellt. Im Herbst werden die Uhren eine Stunde zurückgestellt. Dies bedeutet, dass sich der UTC-Offset für einen Standort im Laufe des Jahres ändert.

Wenn Sie IANA-Zeitzonen-Identifikatoren verwenden, wendet die Intl.DateTimeFormat-API automatisch den korrekten Offset für jedes Datum an.

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

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

console.log(`Winter: ${formatter.format(winterDate)}`);
console.log(`Summer: ${formatter.format(summerDate)}`);

// Output:
// Winter: January 15, 2025 at 3:00:00 PM EST
// Summer: July 15, 2025 at 4:00:00 PM EDT

Im Januar verwendet New York die Eastern Standard Time mit Offset UTC-5 und zeigt 15:00 Uhr an. Im Juli verwendet New York die Eastern Daylight Time mit Offset UTC-4 und zeigt 16:00 Uhr an. Dieselbe UTC-Zeit erzeugt unterschiedliche lokale Zeiten, je nachdem, ob die Sommerzeit aktiv ist.

Sie müssen nicht nachverfolgen, welche Daten welchen Offset verwenden. Die API übernimmt dies automatisch.

Zeitformatierung für die Terminplanung

Wenn Sie Terminzeiten anzeigen, formatieren Sie die Zeit am Veranstaltungsort und optional am Standort des Benutzers.

const eventTime = new Date('2025-03-15T18:00:00Z');
const eventTimeZone = 'Europe/Paris';
const userTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;

const eventFormatter = new Intl.DateTimeFormat('en-US', {
  timeZone: eventTimeZone,
  dateStyle: 'full',
  timeStyle: 'short'
});

const userFormatter = new Intl.DateTimeFormat('en-US', {
  timeZone: userTimeZone,
  dateStyle: 'full',
  timeStyle: 'short'
});

console.log(`Event time: ${eventFormatter.format(eventTime)} (Paris)`);
console.log(`Your time: ${userFormatter.format(eventTime)}`);

// Output (for a user in New York):
// Event time: Saturday, March 15, 2025 at 7:00 PM (Paris)
// Your time: Saturday, March 15, 2025 at 2:00 PM

Dieses Muster zeigt Benutzern sowohl, wann die Veranstaltung in ihrer eigenen Zeitzone stattfindet, als auch wann sie basierend auf ihrem Standort teilnehmen sollten.

Formatierung von Server-Zeitstempeln in der Zeitzone des Benutzers

Server-Logs und Datenbankeinträge verwenden häufig UTC-Zeitstempel. Wenn Sie diese Benutzern anzeigen, konvertieren Sie sie in die lokale Zeitzone des Benutzers.

const serverTimestamp = new Date('2025-03-15T20:00:00Z');
const userTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;

const formatter = new Intl.DateTimeFormat(navigator.language, {
  timeZone: userTimeZone,
  dateStyle: 'short',
  timeStyle: 'medium'
});

console.log(`Activity: ${formatter.format(serverTimestamp)}`);
// Output varies based on user's time zone and locale
// For en-US in New York: "Activity: 3/15/25, 4:00:00 PM"

Dies stellt sicher, dass Benutzer Zeitstempel in vertrauter Ortszeit anstelle von UTC oder Server-Zeit sehen.

Kombination von timeZone mit anderen Optionen

Die Option timeZone funktioniert mit allen anderen Optionen von Intl.DateTimeFormat. Sie können einzelne Datums- und Zeitkomponenten angeben, Style-Presets verwenden oder das Kalendersystem steuern.

const date = new Date('2025-03-15T20:00:00Z');

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

console.log(formatter.format(date));
// Output: "Monday, March 16, 2025 at 5:00:00 AM Japan Standard Time"

Die Option timeZoneName steuert, wie der Zeitzonenname in der Ausgabe erscheint. Spätere Lektionen werden diese Option detailliert behandeln.

Was zu vermeiden ist

Verwenden Sie keine Zeitzonenabkürzungen wie EST, PST oder GMT als Werte für die Option timeZone. Diese Abkürzungen sind mehrdeutig und werden nicht konsistent unterstützt.

// Incorrect - abbreviations may not work
const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'EST',  // This may throw an error
  dateStyle: 'short',
  timeStyle: 'short'
});

Verwenden Sie immer IANA-Identifikatoren wie America/New_York oder Offset-Strings wie -05:00.

Gehen Sie nicht davon aus, dass die Zeitzone des Benutzers mit der Zeitzone des Servers übereinstimmt. Formatieren Sie Zeiten immer explizit in der korrekten Zone oder verwenden Sie die erkannte Zeitzone des Benutzers.

Wiederverwendung von Formatierern über Zeitzonen hinweg

Beim Formatieren von Datumsangaben für mehrere Zeitzonen können viele Formatierer erstellt werden. Wenn Sie viele Datumsangaben mit denselben Einstellungen formatieren, verwenden Sie Formatierer-Instanzen wieder, um eine bessere Performance zu erzielen.

const dates = [
  new Date('2025-03-15T20:00:00Z'),
  new Date('2025-03-16T14:00:00Z'),
  new Date('2025-03-17T09:00:00Z')
];

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'Europe/Berlin',
  dateStyle: 'short',
  timeStyle: 'short'
});

dates.forEach(date => {
  console.log(formatter.format(date));
});

// Output:
// "3/15/25, 9:00 PM"
// "3/16/25, 3:00 PM"
// "3/17/25, 10:00 AM"

Das Erstellen eines Formatierers umfasst die Verarbeitung von Optionen und das Laden von Locale-Daten. Die Wiederverwendung desselben Formatierers für mehrere Datumsangaben vermeidet diesen Overhead.