So formatieren Sie Zeiten im Gebietsschema der Benutzer
Verwenden Sie JavaScript, um Zeiten entsprechend den regionalen Konventionen jedes Benutzers anzuzeigen
Einführung
Zeiten werden weltweit unterschiedlich dargestellt. Amerikaner sehen 15:30 Uhr typischerweise als 3:30 PM angezeigt, während die meisten Europäer 15:30 erwarten. Wenn Sie ein Zeitformat fest codieren, gehen Sie davon aus, dass alle Benutzer derselben Konvention folgen.
Die Anzeige von Zeiten in einem ungewohnten Format führt zu Verwirrung. Ein Benutzer, der an die 24-Stunden-Zeit gewöhnt ist und 3:30 PM sieht, muss diese mental umrechnen, um zu verstehen, ob es sich um Vormittag oder Nachmittag handelt. Diese kognitive Belastung summiert sich über jede Zeit in Ihrer Anwendung.
JavaScript stellt die Intl.DateTimeFormat-API bereit, um die Zeitformatierung automatisch zu handhaben. Diese Lektion erklärt, warum Zeitformate zwischen Kulturen variieren, wie die API funktioniert und wie Sie Zeiten für jedes Gebietsschema korrekt formatieren.
Warum Zeitformate je nach Gebietsschema variieren
Verschiedene Regionen haben unterschiedliche Konventionen für die Anzeige von Zeiten entwickelt. Diese Konventionen spiegeln historische Praktiken, Bildungssysteme und kulturelle Präferenzen wider. Es gibt kein universelles Format.
In den Vereinigten Staaten, Kanada, Australien und den Philippinen verwenden Zeiten das 12-Stunden-Format mit AM- und PM-Indikatoren. 15:30 Uhr nachmittags erscheint als 3:30 PM.
In den meisten europäischen Ländern, Lateinamerika und Asien verwenden Zeiten das 24-Stunden-Format ohne AM- oder PM-Indikatoren. Dieselbe Zeit erscheint als 15:30.
Auch das Trennzeichen zwischen Stunden und Minuten variiert. Englischsprachige Länder verwenden Doppelpunkte, während einige Gebietsschemata Punkte oder andere Satzzeichen verwenden.
Auch die Art und Weise, wie AM und PM erscheinen, unterscheidet sich. Englisch verwendet AM und PM, Spanisch verwendet a.m. und p.m., und einige Gebietsschemata platzieren diese Indikatoren vor der Zeit statt danach.
Wenn Sie Uhrzeiten anzeigen, müssen Sie die Erwartungen der Benutzer sowohl hinsichtlich des Stundenformats als auch der spezifischen Formatierungskonventionen erfüllen.
Verwendung von Intl.DateTimeFormat zur Formatierung von Uhrzeiten
Der Intl.DateTimeFormat-Konstruktor erstellt einen Formatter, der gebietsschemaspezifische Konventionen anwendet. Um Uhrzeiten zu formatieren, übergeben Sie einen Locale-Identifier als erstes Argument und geben Sie zeitbezogene Optionen im zweiten Argument an.
const formatter = new Intl.DateTimeFormat('en-US', {
hour: 'numeric',
minute: 'numeric'
});
const date = new Date('2025-03-15T15:30:00');
console.log(formatter.format(date));
// Output: "3:30 PM"
Dies erstellt einen Formatter für US-Englisch, der Stunden und Minuten anzeigt. Die Optionen hour und minute weisen den Formatter an, diese Komponenten einzuschließen. Die Methode format() konvertiert das Date-Objekt in einen String mit entsprechender Formatierung.
Der Date-Konstruktor akzeptiert einen ISO-8601-Datetime-String wie 2025-03-15T15:30:00. Dies erstellt ein Date-Objekt, das 15:30 Uhr am 15. März 2025 repräsentiert. Der Formatter konvertiert dies dann in einen gebietsschemaspezifischen Uhrzeit-String.
Formatierung derselben Uhrzeit für verschiedene Gebietsschemas
Sie können dieselbe Uhrzeit für verschiedene Gebietsschemas formatieren, indem Sie den an den Konstruktor übergebenen Locale-Identifier ändern.
const date = new Date('2025-03-15T15:30:00');
const usFormatter = new Intl.DateTimeFormat('en-US', {
hour: 'numeric',
minute: 'numeric'
});
console.log(usFormatter.format(date));
// Output: "3:30 PM"
const gbFormatter = new Intl.DateTimeFormat('en-GB', {
hour: 'numeric',
minute: 'numeric'
});
console.log(gbFormatter.format(date));
// Output: "15:30"
const deFormatter = new Intl.DateTimeFormat('de-DE', {
hour: 'numeric',
minute: 'numeric'
});
console.log(deFormatter.format(date));
// Output: "15:30"
const frFormatter = new Intl.DateTimeFormat('fr-FR', {
hour: 'numeric',
minute: 'numeric'
});
console.log(frFormatter.format(date));
// Output: "15:30"
Jeder Formatter wendet unterschiedliche Konventionen an. Der US-Formatter verwendet das 12-Stunden-Format mit AM/PM. Die UK-, deutschen und französischen Formatter verwenden alle das 24-Stunden-Format ohne AM/PM-Indikatoren.
Sie müssen nicht wissen, welches Format jedes Gebietsschema verwendet. Die API behandelt diese Details automatisch basierend auf dem Locale-Identifier.
Einbeziehung von Sekunden in die Uhrzeitanzeige
Sie können die Option second hinzufügen, um Sekunden zusammen mit Stunden und Minuten anzuzeigen.
const formatter = new Intl.DateTimeFormat('en-US', {
hour: 'numeric',
minute: 'numeric',
second: 'numeric'
});
const date = new Date('2025-03-15T15:30:45');
console.log(formatter.format(date));
// Output: "3:30:45 PM"
Die Option second funktioniert genauso wie hour und minute. Setzen Sie sie auf 'numeric', um Sekunden in die Ausgabe einzuschließen.
Steuerung der Ziffernpolsterung mit 2-digit
Die Optionen hour, minute und second akzeptieren zwei Werte: 'numeric' und '2-digit'. Der Wert 'numeric' zeigt Ziffern ohne Polsterung an, während '2-digit' immer zwei Ziffern mit führenden Nullen anzeigt.
const date = new Date('2025-03-15T09:05:03');
const numericFormatter = new Intl.DateTimeFormat('en-US', {
hour: 'numeric',
minute: 'numeric',
second: 'numeric'
});
console.log(numericFormatter.format(date));
// Output: "9:05:03 AM"
const twoDigitFormatter = new Intl.DateTimeFormat('en-US', {
hour: '2-digit',
minute: '2-digit',
second: '2-digit'
});
console.log(twoDigitFormatter.format(date));
// Output: "09:05:03 AM"
Der numerische Formatierer zeigt 9:05:03 AM mit einer einzelnen Ziffer für die Stunde an. Der zweistellige Formatierer zeigt 09:05:03 AM mit einer führenden Null für die Stunde an. Beide zeigen zwei Ziffern für Minuten und Sekunden an, da diese Werte unabhängig von der Einstellung typischerweise gepolstert werden.
Erzwingen des 12-Stunden- oder 24-Stunden-Formats
Standardmäßig verwendet die API das vom Gebietsschema bevorzugte Zeitformat. Sie können dies mit der Option hour12 überschreiben.
const date = new Date('2025-03-15T15:30:00');
const hour12Formatter = new Intl.DateTimeFormat('en-GB', {
hour: 'numeric',
minute: 'numeric',
hour12: true
});
console.log(hour12Formatter.format(date));
// Output: "3:30 pm"
const hour24Formatter = new Intl.DateTimeFormat('en-US', {
hour: 'numeric',
minute: 'numeric',
hour12: false
});
console.log(hour24Formatter.format(date));
// Output: "15:30"
Die Einstellung hour12: true erzwingt das 12-Stunden-Format auch für Gebietsschemata, die normalerweise das 24-Stunden-Format verwenden. Die Einstellung hour12: false erzwingt das 24-Stunden-Format auch für Gebietsschemata, die normalerweise das 12-Stunden-Format verwenden.
Das Gebietsschema bestimmt weiterhin andere Formatierungsdetails wie Interpunktion und Abstände. Der UK-Formatierer mit hour12: true zeigt 3:30 pm mit kleingeschriebenem pm an, während ein US-Formatierer 3:30 PM mit großgeschriebenem PM anzeigen würde.
Formatierung von Zeiten für das Gebietsschema des Benutzers
Anstatt ein bestimmtes Gebietsschema fest zu codieren, können Sie die bevorzugte Sprache des Benutzers aus dem Browser verwenden. Die Eigenschaft navigator.language gibt die bevorzugte Sprache des Benutzers zurück.
const userLocale = navigator.language;
const formatter = new Intl.DateTimeFormat(userLocale, {
hour: 'numeric',
minute: 'numeric'
});
const date = new Date('2025-03-15T15:30:00');
console.log(formatter.format(date));
// Output varies by user's locale
// For en-US: "3:30 PM"
// For en-GB: "15:30"
// For de-DE: "15:30"
// For fr-FR: "15:30"
Dieser Ansatz zeigt Zeiten entsprechend den Erwartungen jedes Benutzers an, ohne dass diese manuell ein Gebietsschema auswählen müssen. Der Browser stellt die Sprachpräferenz bereit, und die Intl-API wendet die entsprechenden Formatierungskonventionen an.
Sie können auch das gesamte Array der bevorzugten Sprachen übergeben, um Fallback-Verhalten zu aktivieren.
const formatter = new Intl.DateTimeFormat(navigator.languages, {
hour: 'numeric',
minute: 'numeric'
});
const date = new Date('2025-03-15T15:30:00');
console.log(formatter.format(date));
Die API verwendet die erste Locale aus dem Array, die sie unterstützt. Dies bietet eine bessere Fallback-Behandlung, wenn die oberste Präferenz der Benutzenden nicht verfügbar ist.
Zeiten zum Formatieren erstellen
Sie können Date-Objekte mit Zeitinformationen auf verschiedene Arten erstellen. Der zuverlässigste Ansatz ist die Verwendung von ISO 8601 Datetime-Strings.
const time1 = new Date('2025-03-15T09:00:00');
const time2 = new Date('2025-03-15T15:30:00');
const time3 = new Date('2025-03-15T23:45:30');
const formatter = new Intl.DateTimeFormat('en-US', {
hour: 'numeric',
minute: 'numeric'
});
console.log(formatter.format(time1));
// Output: "9:00 AM"
console.log(formatter.format(time2));
// Output: "3:30 PM"
console.log(formatter.format(time3));
// Output: "11:45 PM"
ISO 8601 Datetime-Strings verwenden das Format YYYY-MM-DDTHH:MM:SS. Das T trennt das Datum von der Zeit. Dieses Format ist eindeutig und funktioniert konsistent über alle Locales und Zeitzonen hinweg.
Zeiten aus Timestamps formatieren
Sie können auch Date-Objekte aus Unix-Timestamps erstellen. Ein Unix-Timestamp repräsentiert die Anzahl der Millisekunden seit dem 1. Januar 1970 UTC.
const timestamp = 1710515400000; // March 15, 2025 at 3:30 PM
const date = new Date(timestamp);
const formatter = new Intl.DateTimeFormat('en-US', {
hour: 'numeric',
minute: 'numeric'
});
console.log(formatter.format(date));
// Output: "3:30 PM"
Dieser Ansatz funktioniert, wenn Sie Timestamps von APIs, Datenbanken oder anderen Systemen erhalten, die Zeiten als Zahlen darstellen.
Sie können den Timestamp auch direkt an die Methode format() übergeben, ohne zuerst ein Date-Objekt zu erstellen.
const formatter = new Intl.DateTimeFormat('en-US', {
hour: 'numeric',
minute: 'numeric'
});
const timestamp = 1710515400000;
console.log(formatter.format(timestamp));
// Output: "3:30 PM"
Die API akzeptiert sowohl Date-Objekte als auch Timestamps. Verwenden Sie den Ansatz, der besser zu Ihrem Code passt.
Die aktuelle Zeit formatieren
Um die aktuelle Zeit zu formatieren, erstellen Sie ein Date-Objekt ohne Argumente. Dies erstellt ein Date-Objekt, das den aktuellen Moment repräsentiert.
const formatter = new Intl.DateTimeFormat('en-US', {
hour: 'numeric',
minute: 'numeric',
second: 'numeric'
});
const now = new Date();
console.log(formatter.format(now));
// Output: "3:45:12 PM" (or current time when run)
Sie können auch Date.now() direkt übergeben, was den aktuellen Timestamp als Zahl zurückgibt.
const formatter = new Intl.DateTimeFormat('en-US', {
hour: 'numeric',
minute: 'numeric',
second: 'numeric'
});
console.log(formatter.format(Date.now()));
// Output: "3:45:12 PM" (or current time when run)
Beide Ansätze erzeugen identische Ergebnisse.
Formatter für Performance wiederverwenden
Das Erstellen einer neuen Intl.DateTimeFormat-Instanz beinhaltet das Laden von Locale-Daten und die Verarbeitung von Optionen. Wenn Sie mehrere Zeiten mit derselben Locale und denselben Einstellungen formatieren müssen, erstellen Sie den Formatter einmal und verwenden Sie ihn wieder.
const formatter = new Intl.DateTimeFormat('en-US', {
hour: 'numeric',
minute: 'numeric'
});
const times = [
new Date('2025-03-15T09:00:00'),
new Date('2025-03-15T12:30:00'),
new Date('2025-03-15T18:45:00')
];
times.forEach(time => {
console.log(formatter.format(time));
});
// Output:
// "9:00 AM"
// "12:30 PM"
// "6:45 PM"
Dieser Ansatz ist effizienter als die Erstellung eines neuen Formatters für jede Uhrzeit. Der Leistungsunterschied wird signifikant, wenn Arrays mit Hunderten oder Tausenden von Zeitwerten formatiert werden.
Uhrzeiten in Templates formatieren
Sie können Intl.DateTimeFormat überall dort verwenden, wo Sie Uhrzeiten für Benutzer anzeigen. Dies umfasst das Einfügen formatierter Uhrzeiten in HTML-Templates, die Anzeige von Uhrzeiten in Tabellen oder die Darstellung von Zeitstempeln in Benutzeroberflächen.
const formatter = new Intl.DateTimeFormat(navigator.language, {
hour: 'numeric',
minute: 'numeric'
});
const eventStart = new Date('2025-03-15T14:00:00');
const eventEnd = new Date('2025-03-15T16:30:00');
document.getElementById('start-time').textContent = formatter.format(eventStart);
document.getElementById('end-time').textContent = formatter.format(eventEnd);
Die formatierten Strings funktionieren wie jeder andere String-Wert. Sie können sie in Textinhalte, Attribute oder jeden anderen Kontext einfügen, in dem Sie Informationen für Benutzer anzeigen.