Wie man eine Liste gültiger Zeitzonenbezeichner erhält

Alle unterstützten IANA-Zeitzonenbezeichner in JavaScript abrufen, um Dropdown-Menüs zu erstellen und Benutzereingaben zu validieren

Einführung

Beim Entwickeln von Funktionen, die Benutzern die Auswahl ihrer Zeitzone ermöglichen, müssen Sie wissen, welche Zeitzonen-Kennungen gültig sind. Ein Benutzer in New York muss möglicherweise America/New_York wählen, während ein Benutzer in Tokio Asia/Tokyo benötigt. Wenn Sie eine Liste von Zeitzonen fest codieren, schaffen Sie mehrere Probleme.

Erstens wird die Liste veraltet. Zeitzonendefinitionen ändern sich, wenn Regierungen Sommerzeitregeln ändern oder neue Zeitzonen erstellen. Zweitens unterstützen verschiedene JavaScript-Umgebungen unterschiedliche Zeitzonen. Eine Zeitzone, die in Chrome funktioniert, funktioniert möglicherweise nicht in einem älteren Browser oder einer Node.js-Version. Drittens schafft die manuelle Pflege von Hunderten von Zeitzonen-Strings Möglichkeiten für Tippfehler und Inkonsistenzen.

JavaScript bietet die Methode Intl.supportedValuesOf(), um alle Zeitzonen-Kennungen abzurufen, die die aktuelle Umgebung unterstützt. Dies stellt sicher, dass Ihre Anwendung nur Zeitzonen anbietet, die korrekt funktionieren und mit Änderungen an der Zeitzonendatenbank aktuell bleiben.

Was Zeitzonen-Kennungen sind

Zeitzonen-Kennungen sind standardisierte Strings, die geografische Regionen mit einheitlichen Zeitregeln repräsentieren. Sie stammen aus der IANA-Zeitzonendatenbank, einer umfassenden Liste, die von einer internationalen Organisation gepflegt wird, die Zeitzonen und Sommerzeitänderungen weltweit verfolgt.

Die Kennungen verwenden ein spezifisches Format, das sie über verschiedene Systeme hinweg eindeutig und stabil macht. Das Verständnis dieses Formats hilft Ihnen, effektiv mit Zeitzonen zu arbeiten.

Das Format der IANA-Zeitzonen-Kennungen verstehen

IANA-Zeitzonen-Kennungen folgen dem Muster Area/Location, wobei der Bereich einen Kontinent oder Ozean und der Standort eine Stadt oder Region innerhalb dieses Bereichs darstellt.

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

Der Bereich entspricht:

  • America für Nord- und Südamerika
  • Europe für europäische Standorte
  • Asia für asiatische Standorte
  • Africa für afrikanische Standorte
  • Australia für australische Standorte
  • Pacific für Pazifikinseln
  • Atlantic für Atlantikinseln
  • Indian für Inseln im Indischen Ozean
  • Antarctica für antarktische Forschungsstationen

Der Standort repräsentiert typischerweise die größte oder repräsentativste Stadt in der Zeitzone. New York repräsentiert die Eastern-Zeitzone der Vereinigten Staaten. Tokio repräsentiert Japan. Sydney repräsentiert die Eastern-Zeitzone Australiens.

Einige Kennungen umfassen drei Teile für Regionen innerhalb eines größeren Bereichs:

const detailedExamples = [
  'America/Indiana/Indianapolis',
  'America/Kentucky/Louisville',
  'America/North_Dakota/Center'
];

Diese mehrteiligen Kennungen unterscheiden Regionen, die innerhalb desselben Landes unterschiedlichen Zeitregeln folgen.

Die Datenbank verwendet Unterstriche anstelle von Leerzeichen in Städtenamen:

const underscoreExamples = [
  'America/New_York',    // Nicht "New York"
  'America/Los_Angeles', // Nicht "Los Angeles"
  'Asia/Ho_Chi_Minh'     // Nicht "Ho Chi Minh"
];

Dieses Format stellt sicher, dass Kennungen als einzelne Token ohne Sonderzeichen funktionieren, die Parsing-Probleme verursachen könnten.

Warum Identifikatoren Städte statt Abkürzungen verwenden

Man könnte erwarten, dass Abkürzungen wie EST für Eastern Standard Time oder PST für Pacific Standard Time verwendet werden. Diese Abkürzungen sind jedoch mehrdeutig. EST bedeutet Eastern Standard Time in Nordamerika, aber auch Australian Eastern Standard Time. CST könnte Central Standard Time, China Standard Time oder Cuba Standard Time bedeuten.

Stadtbasierte Identifikatoren bleiben eindeutig. America/New_York bezieht sich immer auf denselben Ort und dieselben Zeitregeln, unabhängig vom Kontext.

Zusätzlich erfassen Abkürzungen keine Sommerzeit-Übergänge. EST repräsentiert nur die Standardzeit, nicht EDT (Eastern Daylight Time). Der Identifikator America/New_York behandelt automatisch sowohl Standard- als auch Sommerzeit basierend auf dem Datum.

Abrufen aller unterstützten Zeitzonen-Identifikatoren

Die Methode Intl.supportedValuesOf() mit dem Parameter 'timeZone' gibt ein Array aller Zeitzonen-Identifikatoren zurück, die von der JavaScript-Umgebung unterstützt werden.

const timeZones = Intl.supportedValuesOf('timeZone');

console.log(timeZones.length);
// Ausgabe: über 400

console.log(timeZones.slice(0, 10));
// Ausgabe: [
//   "Africa/Abidjan",
//   "Africa/Accra",
//   "Africa/Addis_Ababa",
//   "Africa/Algiers",
//   "Africa/Asmera",
//   "Africa/Bamako",
//   "Africa/Bangui",
//   "Africa/Banjul",
//   "Africa/Bissau",
//   "Africa/Blantyre"
// ]

Die Methode gibt die Identifikatoren in alphabetischer Reihenfolge ohne Duplikate zurück. Die genaue Liste hängt von der JavaScript-Umgebung ab, aber moderne Browser und Node.js-Versionen unterstützen über 400 Zeitzonen.

Jeder Identifikator im Array kann mit Intl.DateTimeFormat verwendet werden, um Daten und Uhrzeiten für diese Zeitzone zu formatieren:

const timeZone = timeZones[0]; // "Africa/Abidjan"
const date = new Date('2025-10-15T12:00:00Z');

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

console.log(formatter.format(date));
// Ausgabe: "October 15, 2025 at 12:00 PM"

Die Methode garantiert, dass jeder zurückgegebene Identifikator korrekt mit den Intl-APIs funktioniert.

Erstellen eines Zeitzonen-Selektors

Der häufigste Anwendungsfall für das Abrufen aller Zeitzonenkennungen ist der Aufbau eines Dropdown- oder Select-Elements, mit dem Benutzer ihre Zeitzone auswählen können.

function buildTimeZoneSelector() {
  const timeZones = Intl.supportedValuesOf('timeZone');
  const select = document.createElement('select');
  select.name = 'timeZone';

  timeZones.forEach(timeZone => {
    const option = document.createElement('option');
    option.value = timeZone;
    option.textContent = timeZone;
    select.appendChild(option);
  });

  return select;
}

const selector = buildTimeZoneSelector();
document.body.appendChild(selector);

Dies erstellt ein Select-Element mit Optionen für jede unterstützte Zeitzone. Benutzer können durch die Liste scrollen und ihren Standort auswählen.

Allerdings bietet eine Liste mit über 400 unsortierten Kennungen eine schlechte Benutzererfahrung. Benutzer müssen verstehen, wie die Kennungen organisiert sind, und ihren Standort schnell finden können.

Gruppierung von Zeitzonen nach Region

Die Organisation von Zeitzonen nach Kontinenten erleichtert die Navigation in der Liste. Sie können die Region aus jeder Kennung extrahieren und sie entsprechend gruppieren.

function groupTimeZonesByRegion() {
  const timeZones = Intl.supportedValuesOf('timeZone');
  const grouped = {};

  timeZones.forEach(timeZone => {
    const parts = timeZone.split('/');
    const region = parts[0];

    if (!grouped[region]) {
      grouped[region] = [];
    }

    grouped[region].push(timeZone);
  });

  return grouped;
}

const grouped = groupTimeZonesByRegion();

console.log(Object.keys(grouped));
// Output: [
//   "Africa", "America", "Antarctica", "Arctic",
//   "Asia", "Atlantic", "Australia", "Europe",
//   "Indian", "Pacific", "Etc"
// ]

console.log(grouped['America'].slice(0, 5));
// Output: [
//   "America/Adak",
//   "America/Anchorage",
//   "America/Anguilla",
//   "America/Antigua",
//   "America/Araguaina"
// ]

Die Funktion teilt jede Kennung am Schrägstrich und verwendet den ersten Teil als Regionsschlüssel. Dies erzeugt ein Objekt, bei dem jede Region ein Array von Zeitzonen enthält.

Sie können diese gruppierten Daten verwenden, um einen besser organisierten Selektor mit optgroup-Elementen zu erstellen:

function buildGroupedTimeZoneSelector() {
  const grouped = groupTimeZonesByRegion();
  const select = document.createElement('select');
  select.name = 'timeZone';

  Object.keys(grouped).sort().forEach(region => {
    const optgroup = document.createElement('optgroup');
    optgroup.label = region;

    grouped[region].forEach(timeZone => {
      const option = document.createElement('option');
      option.value = timeZone;
      option.textContent = timeZone.split('/').slice(1).join('/');
      optgroup.appendChild(option);
    });

    select.appendChild(optgroup);
  });

  return select;
}

const groupedSelector = buildGroupedTimeZoneSelector();
document.body.appendChild(groupedSelector);

Dies erstellt ein Select-Element, bei dem Zeitzonen unter ihren regionalen Überschriften erscheinen. Der Optionstext zeigt nur den Stadtanteil der Kennung an, was die Liste lesbarer macht.

Filtern von Zeitzonen nach Region

Manchmal benötigt man nur Zeitzonen aus bestimmten Regionen. Beispielsweise könnte eine Anwendung, die nur nordamerikanische Nutzer bedient, ausschließlich amerikanische Zeitzonen anzeigen.

function getTimeZonesForRegion(region) {
  const timeZones = Intl.supportedValuesOf('timeZone');
  return timeZones.filter(timeZone => timeZone.startsWith(`${region}/`));
}

const americanTimeZones = getTimeZonesForRegion('America');
console.log(americanTimeZones.length);
// Output: über 150

console.log(americanTimeZones.slice(0, 5));
// Output: [
//   "America/Adak",
//   "America/Anchorage",
//   "America/Anguilla",
//   "America/Antigua",
//   "America/Araguaina"
// ]

Diese Funktion filtert die vollständige Liste, um nur Kennungen einzuschließen, die mit der angegebenen Region beginnen. Sie können sie mit jedem Regionsnamen aufrufen, um eine fokussierte Liste zu erhalten.

Sie können nach mehreren Regionen filtern:

function getTimeZonesForRegions(regions) {
  const timeZones = Intl.supportedValuesOf('timeZone');
  return timeZones.filter(timeZone => {
    return regions.some(region => timeZone.startsWith(`${region}/`));
  });
}

const europeanAndAsianTimeZones = getTimeZonesForRegions(['Europe', 'Asia']);
console.log(europeanAndAsianTimeZones.length);
// Output: über 200

Dies bietet Flexibilität für Anwendungen, die mehrere, aber nicht alle Regionen bedienen.

Suche nach spezifischen Zeitzonen

Wenn Benutzer die gesuchte Stadt kennen, hilft ihnen die Suche nach Namen, diese schnell zu finden.

function searchTimeZones(query) {
  const timeZones = Intl.supportedValuesOf('timeZone');
  const lowerQuery = query.toLowerCase();

  return timeZones.filter(timeZone => {
    return timeZone.toLowerCase().includes(lowerQuery);
  });
}

const newYorkResults = searchTimeZones('new_york');
console.log(newYorkResults);
// Output: ["America/New_York"]

const londonResults = searchTimeZones('london');
console.log(londonResults);
// Output: ["Europe/London"]

const tokyoResults = searchTimeZones('tokyo');
console.log(tokyoResults);
// Output: ["Asia/Tokyo"]

Diese Funktion führt eine Suche ohne Berücksichtigung der Groß- und Kleinschreibung über alle Zeitzonenkennungen durch. Benutzer können einen Teil eines Stadtnamens eingeben, um passende Zeitzonen zu finden.

Für eine bessere Benutzererfahrung können Sie nach Teilübereinstimmungen suchen und Leerzeichen behandeln:

function searchTimeZonesFlexible(query) {
  const timeZones = Intl.supportedValuesOf('timeZone');
  const normalizedQuery = query.toLowerCase().replace(/\s+/g, '_');

  return timeZones.filter(timeZone => {
    return timeZone.toLowerCase().includes(normalizedQuery);
  });
}

const results = searchTimeZonesFlexible('new york');
console.log(results);
// Output: ["America/New_York"]

Diese Version konvertiert Leerzeichen in der Abfrage in Unterstriche, was dem Format entspricht, das in Zeitzonenkennungen verwendet wird.

Validierung von Zeitzonen-Kennungen

Wenn Benutzer Zeitzonen-Kennungen als Eingabe bereitstellen, müssen Sie überprüfen, ob die Kennung gültig ist, bevor Sie sie mit Intl.DateTimeFormat verwenden.

function isValidTimeZone(timeZone) {
  const supportedTimeZones = Intl.supportedValuesOf('timeZone');
  return supportedTimeZones.includes(timeZone);
}

console.log(isValidTimeZone('America/New_York'));
// Output: true

console.log(isValidTimeZone('Europe/London'));
// Output: true

console.log(isValidTimeZone('Invalid/TimeZone'));
// Output: false

console.log(isValidTimeZone('EST'));
// Output: false

Diese Funktion überprüft, ob eine gegebene Zeichenfolge in der Liste der unterstützten Zeitzonen vorkommt. Wenn die Kennung ungültig ist, können Sie sie ablehnen oder den Benutzer auffordern, aus gültigen Optionen zu wählen.

Sie können auch versuchen, die Kennung zu verwenden und Fehler abzufangen:

function validateTimeZoneByCatch(timeZone) {
  try {
    new Intl.DateTimeFormat('en-US', { timeZone });
    return true;
  } catch (error) {
    return false;
  }
}

console.log(validateTimeZoneByCatch('America/New_York'));
// Output: true

console.log(validateTimeZoneByCatch('Invalid/TimeZone'));
// Output: false

Dieser Ansatz funktioniert, ist jedoch weniger effizient als die Überprüfung der Liste der unterstützten Werte. Verwenden Sie die Überprüfung der unterstützten Werte, wenn die Leistung wichtig ist.

Anzeigen aktueller Offsets für Zeitzonen

Benutzer denken oft an Zeitzonen in Bezug auf ihren Offset von UTC. Die Anzeige des aktuellen Offsets neben jedem Zeitzonennamen hilft Benutzern, den Zeitunterschied zu verstehen.

function getTimeZoneOffset(timeZone) {
  const date = new Date();
  const formatter = new Intl.DateTimeFormat('en-US', {
    timeZone,
    timeZoneName: 'shortOffset'
  });

  const parts = formatter.formatToParts(date);
  const offsetPart = parts.find(part => part.type === 'timeZoneName');

  return offsetPart ? offsetPart.value : '';
}

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

timeZones.forEach(timeZone => {
  const offset = getTimeZoneOffset(timeZone);
  console.log(`${timeZone}: ${offset}`);
});

// Output:
// America/New_York: GMT-4
// Europe/London: GMT+1
// Asia/Tokyo: GMT+9
// Australia/Sydney: GMT+11

Die Funktion formatiert ein Datum mit dem Zeitzonennamen-Stil shortOffset und extrahiert dann den Offset-Teil aus den formatierten Teilen. Dies zeigt, wie viele Stunden vor oder nach UTC jede Zeitzone liegt.

Beachten Sie, dass sich Offsets mit der Sommerzeit ändern. Dieselbe Zeitzone zeigt im Winter und Sommer unterschiedliche Offsets an:

const newYorkWinter = getTimeZoneOffset('America/New_York');
// Im Januar: GMT-5

const newYorkSummer = getTimeZoneOffset('America/New_York');
// Im Juli: GMT-4

Der von dieser Funktion zurückgegebene Offset spiegelt das aktuelle Datum wider, sodass er sich automatisch aktualisiert, wenn sich die Sommerzeitregeln im Laufe des Jahres ändern.

Aufbau eines vollständigen Zeitzonen-Selektors mit Offsets

Die Kombination von Gruppierung, Filterung und Offset-Anzeige erzeugt einen umfassenden Zeitzonen-Selektor:

function buildCompleteTimeZoneSelector() {
  const timeZones = Intl.supportedValuesOf('timeZone');
  const select = document.createElement('select');
  select.name = 'timeZone';

  const grouped = {};
  timeZones.forEach(timeZone => {
    const region = timeZone.split('/')[0];
    if (!grouped[region]) {
      grouped[region] = [];
    }
    grouped[region].push(timeZone);
  });

  Object.keys(grouped).sort().forEach(region => {
    const optgroup = document.createElement('optgroup');
    optgroup.label = region;

    grouped[region].forEach(timeZone => {
      const offset = getTimeZoneOffset(timeZone);
      const location = timeZone.split('/').slice(1).join('/');

      const option = document.createElement('option');
      option.value = timeZone;
      option.textContent = `${location} (${offset})`;
      optgroup.appendChild(option);
    });

    select.appendChild(optgroup);
  });

  return select;
}

const completeSelector = buildCompleteTimeZoneSelector();
document.body.appendChild(completeSelector);

Dieser Selektor gruppiert Zeitzonen nach Region, zeigt lesbare Ortsnamen an und enthält aktuelle UTC-Offsets. Benutzer können ihre Zeitzone schnell nach Region finden und überprüfen, ob der Offset ihren Erwartungen entspricht.

Ermittlung der aktuellen Zeitzone des Benutzers

Während das Abrufen aller unterstützten Zeitzonen für Auswahlschnittstellen nützlich ist, möchte man oft die aktuelle Zeitzone des Benutzers kennen, um sie als Standard zu verwenden.

function getUserTimeZone() {
  return Intl.DateTimeFormat().resolvedOptions().timeZone;
}

const userTimeZone = getUserTimeZone();
console.log(userTimeZone);
// Ausgabe: "America/New_York" (oder die tatsächliche Zeitzone des Benutzers)

Dies gibt den IANA-Identifikator für die Systemzeitzone des Benutzers zurück. Sie können dies verwenden, um die richtige Option in einem Zeitzonen-Selektor vorzuwählen:

function buildTimeZoneSelectorWithDefault() {
  const selector = buildCompleteTimeZoneSelector();
  const userTimeZone = getUserTimeZone();

  const options = selector.querySelectorAll('option');
  options.forEach(option => {
    if (option.value === userTimeZone) {
      option.selected = true;
    }
  });

  return selector;
}

const selectorWithDefault = buildTimeZoneSelectorWithDefault();
document.body.appendChild(selectorWithDefault);

Dies erstellt einen Selektor mit der bereits ausgewählten aktuellen Zeitzone des Benutzers, was die Reibung reduziert, wenn Benutzer ihren Standort bestätigen.

Umgang mit speziellen Zeitzonen

Die Liste der unterstützten Zeitzonen enthält einige spezielle Kennungen, die nicht dem Standardmuster Gebiet/Ort folgen.

const timeZones = Intl.supportedValuesOf('timeZone');

const specialTimeZones = timeZones.filter(tz => !tz.includes('/'));
console.log(specialTimeZones);
// Ausgabe: ["UTC"]

Die Kennung UTC steht für die koordinierte Weltzeit (Coordinated Universal Time), die keine Zeitverschiebung und keine Sommerzeitänderungen hat. Diese Kennung ist nützlich, wenn Sie Zeiten in einem universellen Bezugssystem anstatt in einer lokalen Zeitzone anzeigen möchten.

Einige Umgebungen enthalten zusätzliche spezielle Kennungen wie GMT oder Zonenverschiebungen wie Etc/GMT+5. Sie können diese herausfiltern, wenn Ihre Anwendung nur standardmäßige geografische Zeitzonen benötigt:

function getGeographicTimeZones() {
  const timeZones = Intl.supportedValuesOf('timeZone');
  return timeZones.filter(timeZone => {
    return timeZone.includes('/') && !timeZone.startsWith('Etc/');
  });
}

const geographicTimeZones = getGeographicTimeZones();
console.log(geographicTimeZones.length);
// Ausgabe: über 400

Dies filtert nicht-geografische Kennungen heraus und lässt nur standardmäßige stadtbasierte Zeitzonen übrig.

Verständnis von Zeitzonenaliasen

Die IANA-Datenbank enthält mehrere Kennungen, die sich auf dieselben Zeitzonenregeln beziehen. Zum Beispiel beziehen sich Asia/Calcutta und Asia/Kolkata beide auf die indische Standardzeit, aber Kolkata ist der moderne Name.

Die Methode Intl.supportedValuesOf() gibt die kanonischen Kennungen zurück. Wenn Benutzer einen Alias angeben, funktioniert dieser trotzdem mit Intl.DateTimeFormat:

const canonicalFormatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'Asia/Kolkata',
  timeZoneName: 'long'
});

const aliasFormatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'Asia/Calcutta',
  timeZoneName: 'long'
});

const date = new Date('2025-10-15T12:00:00Z');

console.log(canonicalFormatter.format(date));
// Ausgabe: Zeit in indischer Standardzeit

console.log(aliasFormatter.format(date));
// Ausgabe: Zeit in indischer Standardzeit

Beide Formatierer erzeugen das gleiche Ergebnis, da der Alias intern auf die kanonische Kennung abgebildet wird.

Die Liste der unterstützten Werte enthält jedoch nur kanonische Kennungen. Wenn Sie Benutzereingaben validieren, sollten Sie Aliase auf ihre kanonischen Formen normalisieren:

function normalizeTimeZone(timeZone) {
  try {
    const formatter = new Intl.DateTimeFormat('en-US', { timeZone });
    return formatter.resolvedOptions().timeZone;
  } catch (error) {
    return null;
  }
}

console.log(normalizeTimeZone('Asia/Calcutta'));
// Ausgabe: "Asia/Kolkata"

console.log(normalizeTimeZone('America/New_York'));
// Ausgabe: "America/New_York"

console.log(normalizeTimeZone('Invalid/Zone'));
// Ausgabe: null

Diese Funktion erstellt einen Formatierer mit der angegebenen Zeitzone und extrahiert die kanonische Kennung aus den aufgelösten Optionen. Wenn die Kennung ungültig ist, wirft der Formatierer einen Fehler und die Funktion gibt null zurück.

Browser-Unterstützung und Kompatibilität

Die Methode Intl.supportedValuesOf() ist in modernen Browsern und Node.js-Versionen verfügbar:

  • Chrome 99 und höher
  • Firefox 93 und höher
  • Safari 15.4 und höher
  • Edge 99 und höher
  • Node.js 18.0.0 und höher

Für ältere Umgebungen können Sie die Methode per Feature-Detection prüfen und einen Fallback bereitstellen:

function getSupportedTimeZones() {
  if (typeof Intl.supportedValuesOf === 'function') {
    return Intl.supportedValuesOf('timeZone');
  }

  return [
    'Africa/Cairo',
    'America/New_York',
    'America/Chicago',
    'America/Denver',
    'America/Los_Angeles',
    'Asia/Dubai',
    'Asia/Kolkata',
    'Asia/Tokyo',
    'Australia/Sydney',
    'Europe/London',
    'Europe/Paris',
    'Pacific/Auckland',
    'UTC'
  ];
}

const timeZones = getSupportedTimeZones();

Diese Funktion prüft, ob Intl.supportedValuesOf existiert und gibt die vollständige Liste zurück, falls verfügbar. Wenn nicht, gibt sie eine kleinere, hartcodierte Liste gängiger Zeitzonen zurück. Der Fallback stellt sicher, dass Ihre Anwendung in älteren Umgebungen funktioniert und gleichzeitig die vollständige Liste in modernen Umgebungen bereitstellt.