So wechseln Sie zwischen 12-Stunden- und 24-Stunden-Zeitformat

Einführung

Die Zeit wird weltweit unterschiedlich dargestellt. Amerikaner sehen typischerweise 2:30 PM, während Deutsche 14:30 sehen, und beide repräsentieren denselben Moment. Wenn Sie Zeiten nur in einem Format anzeigen, gehen Sie davon aus, dass alle Benutzer derselben Konvention folgen.

Die Anzeige von Zeiten in einem ungewohnten Format erzeugt Reibung. Ein Benutzer, der 14:30 erwartet, aber 2:30 PM sieht, muss die Zeit mental umrechnen. Ein Benutzer, der 2:30 PM erwartet, aber 14:30 sieht, steht vor demselben Problem. Diese kognitive Belastung wiederholt sich für jede in Ihrer Anwendung angezeigte Zeit.

JavaScript stellt die Intl.DateTimeFormat-API bereit, um die Zeitformatierung automatisch zu handhaben. Diese Lektion erklärt, warum Zeitformate variieren, wie die API die 12-Stunden- versus 24-Stunden-Anzeige steuert und wann Locale-Standardwerte überschrieben werden sollten.

Warum Zeitformate je nach Locale variieren

Verschiedene Regionen haben unterschiedliche Konventionen für die Zeitanzeige entwickelt. Diese Konventionen spiegeln kulturelle Praktiken, Bildungssysteme und historische Präzedenzfälle wider. Kein einzelnes Format ist universell.

In den Vereinigten Staaten, Kanada, Australien und den Philippinen ist das 12-Stunden-Format mit AM/PM-Indikatoren Standard. Die Nachmittagsstunde erscheint als 2:30 PM.

In den meisten Teilen Europas, Lateinamerikas und Asiens ist das 24-Stunden-Format Standard. Dieselbe Zeit erscheint als 14:30 ohne benötigten AM/PM-Indikator.

Einige Regionen verwenden je nach Kontext beide Formate. Das Vereinigte Königreich verwendet das 24-Stunden-Format für Verkehrsfahrpläne, aber das 12-Stunden-Format für alltägliche Gespräche.

Wenn Sie Zeiten anzeigen, müssen Sie die Erwartungen der Benutzer für ihre Region und ihren Kontext erfüllen.

Was 12-Stunden- und 24-Stunden-Formate bedeuten

Das 12-Stunden-Format teilt den Tag in zwei 12-Stunden-Perioden. Die Stunden laufen von 12 bis 11 und beginnen dann von vorne. Das System verwendet AM (ante meridiem) für Mitternacht bis Mittag und PM (post meridiem) für Mittag bis Mitternacht. Mitternacht beginnt um 12:00 AM und Mittag tritt um 12:00 PM ein.

12:00 AM → midnight
1:00 AM → 1 hour after midnight
11:59 AM → 1 minute before noon
12:00 PM → noon
1:00 PM → 1 hour after noon
11:59 PM → 1 minute before midnight

Das 24-Stunden-Format zählt die Stunden kontinuierlich von 0 bis 23. Mitternacht beginnt um 00:00 und der Tag endet um 23:59. Es wird kein AM/PM-Indikator benötigt, da jede Stunde eine eindeutige Nummer hat.

00:00 → midnight
01:00 → 1 hour after midnight
11:59 → 1 minute before noon
12:00 → noon
13:00 → 1 hour after noon
23:59 → 1 minute before midnight

Verschiedene Locales verwenden standardmäßig unterschiedliche Formate. Die Intl.DateTimeFormat-API respektiert diese Standardeinstellungen, ermöglicht es Ihnen jedoch, sie bei Bedarf zu überschreiben.

Verwendung der hour12-Option zur Steuerung des Zeitformats

Die hour12-Option steuert, ob das 12-Stunden-Format verwendet werden soll. Setzen Sie sie auf true für das 12-Stunden-Format mit AM/PM oder auf false für das 24-Stunden-Format.

const date = new Date('2025-03-15T14:30:00');

const format12 = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: 'numeric',
  hour12: true
});

const format24 = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: 'numeric',
  hour12: false
});

console.log(format12.format(date));
// Output: "2:30 PM"

console.log(format24.format(date));
// Output: "14:30"

Die hour12-Option überschreibt das Standardverhalten des Locales. Obwohl US-Englisch typischerweise das 12-Stunden-Format verwendet, erzwingt die Einstellung hour12: false das 24-Stunden-Format.

Sie müssen entweder hour in den Optionen einschließen oder timeStyle verwenden, damit die hour12-Option wirksam wird. Ohne eine Zeitkomponente in der Ausgabe hat die Option keine Auswirkung.

Verwendung der hourCycle-Option für feinkörnige Kontrolle

Die hourCycle-Option bietet mehr Kontrolle als hour12, indem sie genau festlegt, wie Stunden gezählt werden sollen. Sie akzeptiert vier Werte: "h11", "h12", "h23" und "h24".

const date = new Date('2025-03-15T00:30:00'); // 12:30 AM

const h11 = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: 'numeric',
  hourCycle: 'h11'
});

const h12 = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: 'numeric',
  hourCycle: 'h12'
});

const h23 = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: 'numeric',
  hourCycle: 'h23'
});

const h24 = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: 'numeric',
  hourCycle: 'h24'
});

console.log(h11.format(date));
// Output: "0:30 AM"

console.log(h12.format(date));
// Output: "12:30 AM"

console.log(h23.format(date));
// Output: "00:30"

console.log(h24.format(date));
// Output: "24:30"

Jeder Stundenzyklus-Wert erzeugt für dieselbe Uhrzeit eine unterschiedliche Ausgabe. Die Unterschiede werden am deutlichsten um Mitternacht und Mittag.

Die vier hourCycle-Werte verstehen

Die vier hourCycle-Werte definieren, wie Stunden innerhalb jeder Periode nummeriert werden.

Der "h12"-Wert verwendet das 12-Stunden-Format mit Stunden von 1 bis 12. Mitternacht erscheint als 12:00 AM und Mittag erscheint als 12:00 PM. Dies ist das Standard-12-Stunden-Format, das in den Vereinigten Staaten verwendet wird.

Der "h11"-Wert verwendet das 12-Stunden-Format mit Stunden von 0 bis 11. Mitternacht erscheint als 0:00 AM und Mittag erscheint als 0:00 PM. Dieses Format ist weniger verbreitet, erscheint aber in einigen Kontexten.

Der "h23"-Wert verwendet das 24-Stunden-Format mit Stunden von 0 bis 23. Mitternacht erscheint als 00:00 und der Tag endet um 23:59. Dies ist das Standard-24-Stunden-Format, das in den meisten Teilen Europas und Asiens verwendet wird.

Der "h24"-Wert verwendet das 24-Stunden-Format mit Stunden von 1 bis 24. Mitternacht erscheint als 24:00 aus der Perspektive des vorherigen Tages. Dieses Format ist selten, erscheint aber in einigen technischen Kontexten.

Die meisten Anwendungen verwenden entweder "h12" für das 12-Stunden-Format oder "h23" für das 24-Stunden-Format.

Stunden um Mitternacht über Stundenzyklen hinweg vergleichen

Mitternacht demonstriert die Unterschiede zwischen Stundenzyklus-Werten am deutlichsten.

const midnight = new Date('2025-03-15T00:00:00');

const cycles = ['h11', 'h12', 'h23', 'h24'];

cycles.forEach(cycle => {
  const formatter = new Intl.DateTimeFormat('en-US', {
    hour: 'numeric',
    minute: 'numeric',
    second: 'numeric',
    hourCycle: cycle
  });

  console.log(`${cycle}: ${formatter.format(midnight)}`);
});

// Output:
// h11: 0:00:00 AM
// h12: 12:00:00 AM
// h23: 00:00:00
// h24: 24:00:00

Die h12- und h23-Werte erzeugen die vertrautesten Darstellungen für ihre jeweiligen Formate.

Stunden um Mittag über Stundenzyklen hinweg vergleichen

Mittag zeigt ebenfalls, wie sich Stundenzyklen unterscheiden.

const noon = new Date('2025-03-15T12:00:00');

const cycles = ['h11', 'h12', 'h23', 'h24'];

cycles.forEach(cycle => {
  const formatter = new Intl.DateTimeFormat('en-US', {
    hour: 'numeric',
    minute: 'numeric',
    second: 'numeric',
    hourCycle: cycle
  });

  console.log(`${cycle}: ${formatter.format(noon)}`);
});

// Output:
// h11: 0:00:00 PM
// h12: 12:00:00 PM
// h23: 12:00:00
// h24: 12:00:00

Auch hier erzeugen h12 und h23 Standarddarstellungen, während h11 0 für die Mittagsstunde verwendet.

Wie hour12 und hourCycle interagieren

Wenn Sie sowohl hour12 als auch hourCycle angeben, hat die Option hour12 Vorrang und die Option hourCycle wird ignoriert.

const date = new Date('2025-03-15T14:30:00');

const formatter = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: 'numeric',
  hour12: true,
  hourCycle: 'h23'  // This is ignored
});

console.log(formatter.format(date));
// Output: "2:30 PM" (12-hour format from hour12: true)

Die Einstellung hour12: true erzwingt das 12-Stunden-Format und überschreibt die Einstellung hourCycle: 'h23', die normalerweise das 24-Stunden-Format erzeugen würde.

In der Praxis verwenden Sie entweder hour12 für einfache Steuerung oder hourCycle für präzise Steuerung, aber nicht beide zusammen.

Locale-Standardwerte respektieren

Wenn Sie sowohl hour12 als auch hourCycle weglassen, verwendet der Formatter das Standard-Zeitformat des Locales.

const date = new Date('2025-03-15T14:30:00');

const usFormatter = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: 'numeric'
});

const deFormatter = new Intl.DateTimeFormat('de-DE', {
  hour: 'numeric',
  minute: 'numeric'
});

const jpFormatter = new Intl.DateTimeFormat('ja-JP', {
  hour: 'numeric',
  minute: 'numeric'
});

console.log(usFormatter.format(date));
// Output: "2:30 PM" (US default: 12-hour)

console.log(deFormatter.format(date));
// Output: "14:30" (German default: 24-hour)

console.log(jpFormatter.format(date));
// Output: "14:30" (Japanese default: 24-hour)

Das US-Locale verwendet standardmäßig das 12-Stunden-Format, während deutsche und japanische Locales standardmäßig das 24-Stunden-Format verwenden. Die Einhaltung dieser Standardwerte bietet die vertrauteste Benutzererfahrung für Benutzer in jeder Region.

Locale-Standardwerte überschreiben

Sie können das Standard-Zeitformat eines Locales überschreiben, indem Sie explizit hour12 oder hourCycle festlegen.

const date = new Date('2025-03-15T14:30:00');

// Force German locale to use 12-hour format
const de12 = new Intl.DateTimeFormat('de-DE', {
  hour: 'numeric',
  minute: 'numeric',
  hour12: true
});

// Force US locale to use 24-hour format
const us24 = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: 'numeric',
  hour12: false
});

console.log(de12.format(date));
// Output: "2:30 PM"

console.log(us24.format(date));
// Output: "14:30"

Dieser Ansatz funktioniert, wenn Sie ein bestimmtes Zeitformat unabhängig vom Locale des Benutzers durchsetzen müssen.

Wann Locale-Standardwerte respektiert werden sollten

Die meisten Anwendungen sollten Locale-Standardwerte respektieren. Benutzer in jeder Region erwarten, dass Zeiten in ihrem vertrauten Format angezeigt werden. Das Überschreiben dieser Standardwerte führt zu Verwirrung.

Lassen Sie den Formatter das Standard-Zeitformat des Locales verwenden, wenn Sie Zeiten für Benutzer in ihrer eigenen Region anzeigen.

const formatter = new Intl.DateTimeFormat(navigator.language, {
  hour: 'numeric',
  minute: 'numeric'
});

const time = new Date('2025-03-15T14:30:00');
console.log(formatter.format(time));
// Output varies by user's locale
// For en-US: "2:30 PM"
// For de-DE: "14:30"
// For ja-JP: "14:30"

Dieser Ansatz passt sich automatisch an die Erwartungen jedes Benutzers an, ohne dass eine Konfiguration erforderlich ist.

Wann Locale-Standardwerte überschrieben werden sollten

Überschreiben Sie Locale-Standardwerte, wenn Ihre Anwendung Konsistenz über alle Benutzer hinweg erfordert. Transportsysteme, militärische Anwendungen und technische Tools benötigen oft das 24-Stunden-Format unabhängig von der Locale.

// Always use 24-hour format for flight times
const formatter = new Intl.DateTimeFormat(navigator.language, {
  hour: 'numeric',
  minute: 'numeric',
  hour12: false
});

const departureTime = new Date('2025-03-15T14:30:00');
console.log(`Departure: ${formatter.format(departureTime)}`);
// Output: "Departure: 14:30" (for all locales)

Dies gewährleistet Konsistenz bei der Anzeige von Zeiten, auf die Benutzer präzise verweisen müssen, wie z. B. Zeitpläne, Protokolle oder Zeitstempel.

Sie können Standardwerte auch überschreiben, wenn Benutzer explizit eine Präferenz auswählen. Wenn Ihre Anwendung eine Einstellung zur Wahl zwischen 12-Stunden- und 24-Stunden-Format bietet, verwenden Sie diese Präferenz anstelle des Locale-Standardwerts.

function formatTime(date, userPrefers24Hour) {
  const formatter = new Intl.DateTimeFormat(navigator.language, {
    hour: 'numeric',
    minute: 'numeric',
    hour12: !userPrefers24Hour
  });

  return formatter.format(date);
}

const time = new Date('2025-03-15T14:30:00');

console.log(formatTime(time, false));
// Output: "2:30 PM"

console.log(formatTime(time, true));
// Output: "14:30"

Dieses Muster respektiert die Benutzerwahl und lokalisiert gleichzeitig andere Aspekte der Zeitanzeige wie Trennzeichen und Textrichtung.

Verwendung von hour12 mit timeStyle

Die Option hour12 funktioniert mit den Voreinstellungsstilen von timeStyle. Dies ermöglicht es Ihnen, das Zeitformat zu steuern und gleichzeitig praktische Voreinstellungsstile zu verwenden.

const date = new Date('2025-03-15T14:30:45');

const short12 = new Intl.DateTimeFormat('en-US', {
  timeStyle: 'short',
  hour12: true
});

const short24 = new Intl.DateTimeFormat('en-US', {
  timeStyle: 'short',
  hour12: false
});

const medium12 = new Intl.DateTimeFormat('en-US', {
  timeStyle: 'medium',
  hour12: true
});

const medium24 = new Intl.DateTimeFormat('en-US', {
  timeStyle: 'medium',
  hour12: false
});

console.log(short12.format(date));
// Output: "2:30 PM"

console.log(short24.format(date));
// Output: "14:30"

console.log(medium12.format(date));
// Output: "2:30:45 PM"

console.log(medium24.format(date));
// Output: "14:30:45"

Dieser Ansatz vereinfacht die Formatierung durch Kombination von Voreinstellungsstilen mit expliziter Stundenformat-Steuerung.

Formatierung von Zeiten für mehrere Locales

Wenn Ihre Anwendung Benutzer in mehreren Regionen bedient, formatieren Sie Zeiten entsprechend den Konventionen jeder Locale.

const date = new Date('2025-03-15T14:30:00');

const locales = [
  { code: 'en-US', name: 'United States' },
  { code: 'en-GB', name: 'United Kingdom' },
  { code: 'de-DE', name: 'Germany' },
  { code: 'ja-JP', name: 'Japan' }
];

locales.forEach(locale => {
  const formatter = new Intl.DateTimeFormat(locale.code, {
    hour: 'numeric',
    minute: 'numeric'
  });

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

// Output:
// United States: 2:30 PM
// United Kingdom: 14:30
// Germany: 14:30
// Japan: 14:30

Jede Locale verwendet automatisch ihr bevorzugtes Format. Sie müssen nicht wissen, welche Regionen welches Format verwenden.

Überprüfung des aufgelösten Stundenzyklus

Sie können überprüfen, welchen Stundenzyklus der Formatter tatsächlich verwendet, indem Sie resolvedOptions() aufrufen.

const formatter = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: 'numeric'
});

const options = formatter.resolvedOptions();
console.log(options.hourCycle);
// Output: "h12"

console.log(options.hour12);
// Output: true

Diese Methode gibt die tatsächlichen Einstellungen zurück, die der Formatter nach Auflösung aller Locale-Standardwerte und expliziten Optionen verwendet. Das zurückgegebene Objekt enthält sowohl die Eigenschaften hourCycle als auch hour12, wenn Zeitkomponenten vorhanden sind.

Zeiten in Templates formatieren

Sie können formatierte Zeiten überall dort verwenden, wo Sie temporale Informationen für Benutzer anzeigen. Dies umfasst das Einfügen von Zeiten in HTML, das Anzeigen von Zeitstempeln in Logs oder das Darstellen von Zeitplänen.

const formatter = new Intl.DateTimeFormat(navigator.language, {
  hour: 'numeric',
  minute: 'numeric'
});

const meetingTime = new Date('2025-03-15T14:30:00');
const deadlineTime = new Date('2025-03-15T17:00:00');

document.getElementById('meeting').textContent = formatter.format(meetingTime);
document.getElementById('deadline').textContent = formatter.format(deadlineTime);

Die formatierten Strings funktionieren wie jeder andere String-Wert. Sie können sie in Textinhalte, Attribute oder jeden Kontext einfügen, in dem Sie Informationen für Benutzer anzeigen.

Was Sie sich merken sollten

Verwenden Sie die Option hour12, um zwischen 12-Stunden- und 24-Stunden-Format zu wechseln. Setzen Sie sie auf true für das 12-Stunden-Format mit AM/PM oder false für das 24-Stunden-Format.

Verwenden Sie die Option hourCycle für präzise Kontrolle über die Stundennummerierung. Der Wert "h12" bietet das Standard-12-Stunden-Format und "h23" bietet das Standard-24-Stunden-Format.

Respektieren Sie Locale-Standardwerte in den meisten Anwendungen. Benutzer erwarten, dass Zeiten im vertrauten Format ihrer Region erscheinen. Überschreiben Sie Standardwerte nur dann, wenn Konsistenz über alle Benutzer hinweg wichtiger ist als die Einhaltung regionaler Konventionen.

Kombinieren Sie hour12 mit timeStyle-Presets, um das Stundenformat zu steuern und gleichzeitig praktische Preset-Stile für andere Zeitkomponenten zu verwenden.