So erhalten Sie eine Liste gültiger Zeitzonen-Identifikatoren

Rufen Sie alle unterstützten IANA-Zeitzonen-Identifikatoren in JavaScript ab, um Dropdown-Menüs zu erstellen und Benutzereingaben zu validieren

Einführung

Beim Erstellen von Funktionen, die es Benutzern ermöglichen, ihre Zeitzone auszuwählen, müssen Sie wissen, welche Zeitzonen-Identifikatoren gültig sind. Ein Benutzer in New York muss möglicherweise America/New_York auswählen, während ein Benutzer in Tokio Asia/Tokyo benötigt. Wenn Sie eine Liste von Zeitzonen fest codieren, entstehen 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 führt die manuelle Pflege von Hunderten von Zeitzonen-Strings zu Tippfehlern und Inkonsistenzen.

JavaScript stellt die Methode Intl.supportedValuesOf() bereit, um alle Zeitzonen-Identifikatoren abzurufen, die die aktuelle Umgebung unterstützt. Dadurch wird sichergestellt, dass Ihre Anwendung nur Zeitzonen anbietet, die korrekt funktionieren, und mit Änderungen an der Zeitzonendatenbank auf dem neuesten Stand bleibt.

Was Zeitzonen-Identifikatoren sind

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

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

Das Format von IANA-Zeitzonen-Identifikatoren verstehen

IANA-Zeitzonenbezeichner folgen dem Muster Area/Location, wobei der Bereich einen Kontinent oder Ozean und der Ort 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 pazifische Inseln
  • Atlantic für atlantische Inseln
  • Indian für Inseln im Indischen Ozean
  • Antarctica für antarktische Forschungsstationen

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

Einige Bezeichner 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 Bezeichner unterscheiden Regionen, die innerhalb desselben Landes unterschiedlichen Zeitregeln folgen.

Die Datenbank verwendet Unterstriche anstelle von Leerzeichen in Stadtnamen:

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

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

Warum Bezeichner Städte anstelle von Abkürzungen verwenden

Sie könnten erwarten, Abkürzungen wie EST für Eastern Standard Time oder PST für Pacific Standard Time zu verwenden. 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 Bezeichner bleiben eindeutig. America/New_York bezieht sich unabhängig vom Kontext immer auf denselben Ort und dieselben Zeitregeln.

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

Alle unterstützten Zeitzonen-Bezeichner abrufen

Die Methode Intl.supportedValuesOf() mit dem Parameter 'timeZone' gibt ein Array aller von der JavaScript-Umgebung unterstützten Zeitzonen-Bezeichner zurück.

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

console.log(timeZones.length);
// Output: over 400

console.log(timeZones.slice(0, 10));
// Output: [
//   "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 Bezeichner 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 Bezeichner im Array kann mit Intl.DateTimeFormat verwendet werden, um Datum und Uhrzeit 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));
// Output: "October 15, 2025 at 12:00 PM"

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

Einen Zeitzonen-Selektor erstellen

Der häufigste Anwendungsfall für das Abrufen aller Zeitzonen-Bezeichner ist die Erstellung 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 führt eine Liste von über 400 unsortierten Bezeichnern zu einer schlechten Benutzererfahrung. Benutzer müssen verstehen, wie die Bezeichner organisiert sind, und ihren Standort schnell finden.

Zeitzonen nach Region gruppieren

Die Organisation von Zeitzonen nach Kontinent erleichtert die Navigation in der Liste. Sie können die Region aus jedem Bezeichner 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 jeden Identifier am Schrägstrich und verwendet den ersten Teil als Regionsschlüssel. Dies erstellt ein Objekt, in 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, in dem Zeitzonen unter ihren regionalen Überschriften erscheinen. Der Optionstext zeigt nur den Stadtteil des Identifiers an, wodurch die Liste lesbarer wird.

Filtern von Zeitzonen nach Region

Manchmal benötigen Sie nur Zeitzonen aus bestimmten Regionen. Beispielsweise könnte eine Anwendung, die nur nordamerikanische Benutzer bedient, nur 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: over 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 Identifier 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: over 200

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

Suchen nach bestimmten Zeitzonen

Wenn Benutzer die Stadt kennen, nach der sie suchen, hilft ihnen die Suche nach Namen, sie 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 Groß-/Kleinschreibung-unabhängige Suche über alle Zeitzonen-Identifier durch. Benutzer können einen Teil eines Stadtnamens eingeben, um übereinstimmende Zeitzonen zu finden.

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

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 und entspricht damit dem Format, das in Zeitzonen-Identifiern verwendet wird.

Validieren von Zeitzonen-Identifiern

Wenn Benutzer Zeitzonenbezeichner als Eingabe bereitstellen, müssen Sie überprüfen, ob der Bezeichner gültig ist, bevor Sie ihn 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 prüft, ob eine gegebene Zeichenkette in der Liste der unterstützten Zeitzonen erscheint. Wenn der Bezeichner ungültig ist, können Sie ihn ablehnen oder den Benutzer auffordern, aus gültigen Optionen zu wählen.

Sie können auch versuchen, den Bezeichner 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 aber weniger effizient als die Überprüfung der Liste unterstützter Werte. Verwenden Sie die Überprüfung der unterstützten Werte, wenn die Performance wichtig ist.

Aktuelle Offsets für Zeitzonen anzeigen

Benutzer denken bei Zeitzonen oft an deren Offset zu UTC. Die Anzeige des aktuellen Offsets neben jedem Zeitzonennamen hilft Benutzern, die Zeitdifferenz 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 jede Zeitzone vor oder hinter UTC liegt.

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

const newYorkWinter = getTimeZoneOffset('America/New_York');
// In January: GMT-5

const newYorkSummer = getTimeZoneOffset('America/New_York');
// In July: GMT-4

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

Einen vollständigen Zeitzonenauswähler mit Offsets erstellen

Die Kombination von Gruppierung, Filterung und Offset-Anzeige erstellt einen umfassenden Zeitzonenauswähler:

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 Auswähler 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.

Die aktuelle Zeitzone des Benutzers abrufen

Während das Abrufen aller unterstützten Zeitzonen für Auswahlschnittstellen nützlich ist, möchten Sie 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);
// Output: "America/New_York" (or user's actual time zone)

Dies gibt den IANA-Identifier für die System-Zeitzone 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, wodurch die Reibung reduziert wird, wenn Benutzer ihren Standort bestätigen.

Umgang mit speziellen Zeitzonen

Die Liste der unterstützten Zeitzonen enthält einige spezielle Identifier, die nicht dem Standard-Area/Location-Muster folgen.

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

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

Der UTC-Identifier repräsentiert die koordinierte Weltzeit, die keinen Offset und keine Sommerzeitänderungen hat. Dieser Identifier ist nützlich, wenn Sie Zeiten in einem universellen Referenzrahmen anstatt in einer lokalen Zeitzone anzeigen möchten.

Einige Umgebungen enthalten zusätzliche spezielle Identifier wie GMT oder Zonen-Offsets 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);
// Output: over 400

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

Zeitzonen-Aliase verstehen

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

Die Intl.supportedValuesOf()-Methode gibt die kanonischen Identifier zurück. Wenn Benutzer einen Alias angeben, funktioniert er dennoch 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));
// Output: time in Indian Standard Time

console.log(aliasFormatter.format(date));
// Output: time in Indian Standard Time

Beide Formatter erzeugen dasselbe Ergebnis, da der Alias intern auf die kanonische Kennung verweist.

Die Liste der unterstützten Werte enthält jedoch nur kanonische Kennungen. Wenn Sie Benutzereingaben validieren, sollten Sie Aliase in 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'));
// Output: "Asia/Kolkata"

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

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

Diese Funktion erstellt einen Formatter mit der angegebenen Zeitzone und extrahiert die kanonische Kennung aus den aufgelösten Optionen. Wenn die Kennung ungültig ist, wirft der Formatter 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 später
  • Firefox 93 und später
  • Safari 15.4 und später
  • Edge 99 und später
  • Node.js 18.0.0 und später

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. Andernfalls gibt sie eine kleinere, fest codierte 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.