Wie man zwischen 12-Stunden- und 24-Stunden-Zeitformat wechselt

Einführung

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 Uhrzeiten nur in einem Format anzeigen, gehen Sie davon aus, dass alle Benutzer der gleichen Konvention folgen.

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

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

Warum Zeitformate je nach Locale variieren

Verschiedene Regionen haben unterschiedliche Konventionen für die Zeitdarstellung 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 notwendigen AM/PM-Indikator.

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

Wenn Sie Uhrzeiten anzeigen, müssen Sie den Erwartungen des Benutzers für ihre Region und ihren Kontext entsprechen.

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 → Mitternacht
1:00 AM → 1 Stunde nach Mitternacht
11:59 AM → 1 Minute vor Mittag
12:00 PM → Mittag
1:00 PM → 1 Stunde nach Mittag
11:59 PM → 1 Minute vor Mitternacht

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 → Mitternacht
01:00 → 1 Stunde nach Mitternacht
11:59 → 1 Minute vor Mittag
12:00 → Mittag
13:00 → 1 Stunde nach Mittag
23:59 → 1 Minute vor Mitternacht

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

Verwendung der hour12-Option zur Steuerung des Zeitformats

Die Option hour12 steuert, ob das 12-Stunden-Format verwendet wird. 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 Option hour12 überschreibt das Standardverhalten der Locale. 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 Option hour12 wirksam wird. Ohne eine Zeitkomponente in der Ausgabe hat die Option keine Auswirkung.

Verwendung der hourCycle-Option für präzisere Kontrolle

Die Option hourCycle 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 hourCycle-Wert erzeugt eine unterschiedliche Ausgabe für dieselbe Zeit. Die Unterschiede werden besonders um Mitternacht und Mittag deutlich.

Die vier hourCycle-Werte verstehen

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

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

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

Der Wert "h23" 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 Wert "h24" 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, taucht aber in einigen technischen Kontexten auf.

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

Vergleich der Stunden um Mitternacht über verschiedene Stundenzyklen hinweg

Mitternacht zeigt die Unterschiede zwischen den 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 Werte h12 und h23 erzeugen die bekanntesten Darstellungen für ihre jeweiligen Formate.

Vergleich der Stunden am Mittag über verschiedene Stundenzyklen hinweg

Mittag zeigt auch, 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

Wiederum erzeugen h12 und h23 Standarddarstellungen, während h11 für die Mittagsstunde 0 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'  // Dies wird ignoriert
});

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

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

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

Respektieren der Locale-Standardeinstellungen

Wenn Sie sowohl hour12 als auch hourCycle weglassen, verwendet der Formatierer das Standardzeitformat der Locale.

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-Standard: 12-Stunden)

console.log(deFormatter.format(date));
// Output: "14:30" (Deutscher Standard: 24-Stunden)

console.log(jpFormatter.format(date));
// Output: "14:30" (Japanischer Standard: 24-Stunden)

Die US-Locale verwendet standardmäßig das 12-Stunden-Format, während deutsche und japanische Locales standardmäßig das 24-Stunden-Format verwenden. Die Berücksichtigung dieser Standardeinstellungen bietet Benutzern in jeder Region die vertrauteste Erfahrung.

Überschreiben der Locale-Standardeinstellungen

Sie können das Standard-Zeitformat einer Locale überschreiben, indem Sie explizit hour12 oder hourCycle setzen.

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

// Deutsche Locale zwingen, das 12-Stunden-Format zu verwenden
const de12 = new Intl.DateTimeFormat('de-DE', {
  hour: 'numeric',
  minute: 'numeric',
  hour12: true
});

// US-Locale zwingen, das 24-Stunden-Format zu verwenden
const us24 = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: 'numeric',
  hour12: false
});

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

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

Dieser Ansatz funktioniert, wenn Sie ein bestimmtes Zeitformat unabhängig von der Locale des Benutzers erzwingen müssen.

Wann Locale-Standardeinstellungen respektiert werden sollten

Die meisten Anwendungen sollten die Locale-Standardeinstellungen respektieren. Benutzer in jeder Region erwarten, dass Zeiten in ihrem gewohnten Format erscheinen. Das Überschreiben dieser Standardeinstellungen führt zu Verwirrung.

Lassen Sie den Formatter das Standard-Zeitformat der Locale verwenden, wenn Zeiten für Benutzer in ihrer eigenen Region angezeigt werden.

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));
// Ausgabe variiert je nach Locale des Benutzers
// Für en-US: "2:30 PM"
// Für de-DE: "14:30"
// Für ja-JP: "14:30"

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

Wann Locale-Standardeinstellungen überschrieben werden sollten

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

// Immer 24-Stunden-Format für Flugzeiten verwenden
const formatter = new Intl.DateTimeFormat(navigator.language, {
  hour: 'numeric',
  minute: 'numeric',
  hour12: false
});

const departureTime = new Date('2025-03-15T14:30:00');
console.log(`Abflug: ${formatter.format(departureTime)}`);
// Ausgabe: "Abflug: 14:30" (für alle Locales)

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

Sie können auch Standardeinstellungen überschreiben, wenn Benutzer explizit eine Präferenz auswählen. Wenn Ihre Anwendung eine Einstellung bietet, um zwischen 12-Stunden- und 24-Stunden-Format zu wählen, verwenden Sie diese Präferenz anstelle der Locale-Standardeinstellung.

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));
// Ausgabe: "2:30 PM"

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

Dieses Muster respektiert die Benutzerwahl, während andere Aspekte der Zeitanzeige wie Trennzeichen und Textrichtung weiterhin lokalisiert werden.

Verwendung von hour12 mit timeStyle

Die Option hour12 funktioniert mit den vordefinierten Stilen von timeStyle. Dies ermöglicht die Kontrolle des Zeitformats bei gleichzeitiger Nutzung der praktischen vordefinierten Stile.

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 die Kombination von vordefinierten Stilen mit expliziter Kontrolle des Stundenformats.

Formatierung von Uhrzeiten für mehrere Locales

Wenn Ihre Anwendung Benutzer in verschiedenen Regionen bedient, formatieren Sie Uhrzeiten 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 Formatierer 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 Formatierer 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.

Formatierung von Uhrzeiten in Templates

Sie können formatierte Uhrzeiten überall dort verwenden, wo Sie zeitliche Informationen für Benutzer anzeigen. Dies umfasst das Einfügen von Uhrzeiten in HTML, das Anzeigen von Zeitstempeln in Logs oder die Darstellung 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 zu beachten ist

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 auf 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 in den meisten Anwendungen die Standardeinstellungen der Locale. Benutzer erwarten, dass Uhrzeiten im vertrauten Format ihrer Region erscheinen. Überschreiben Sie Standardeinstellungen nur, wenn die Konsistenz für alle Benutzer wichtiger ist als die Einhaltung regionaler Konventionen.

Kombinieren Sie hour12 mit timeStyle-Voreinstellungen, um das Stundenformat zu steuern und gleichzeitig bequeme voreingestellte Stile für andere Zeitkomponenten zu verwenden.