Wie man Uhrzeiten in der Sprache des Benutzers formatiert
Verwenden Sie JavaScript, um Uhrzeiten gemäß den regionalen Konventionen jedes Benutzers anzuzeigen
Einführung
Uhrzeiten werden weltweit unterschiedlich dargestellt. Amerikaner sehen 3:30 PM 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 der gleichen Konvention folgen.
Die Anzeige von Uhrzeiten in einem ungewohnten Format führt zu Verwirrung. Ein Benutzer, der an das 24-Stunden-Format gewöhnt ist und 3:30 PM sieht, muss dies gedanklich umrechnen, um zu verstehen, ob es sich um den Vormittag oder Nachmittag handelt. Diese kognitive Belastung verstärkt sich bei jeder Zeitangabe in Ihrer Anwendung.
JavaScript bietet die Intl.DateTimeFormat-API, um die Zeitformatierung automatisch zu handhaben. Diese Lektion erklärt, warum Zeitformate je nach Kultur variieren, wie die API funktioniert und wie man Uhrzeiten für jede Locale korrekt formatiert.
Warum Zeitformate je nach Locale variieren
Verschiedene Regionen haben unterschiedliche Konventionen zur Darstellung von Uhrzeiten entwickelt. Diese Konventionen spiegeln historische Praktiken, Bildungssysteme und kulturelle Präferenzen wider. Kein einzelnes Format ist universell.
In den Vereinigten Staaten, Kanada, Australien und den Philippinen werden Uhrzeiten im 12-Stunden-Format mit AM- und PM-Indikatoren verwendet. 3:30 am Nachmittag erscheint als 3:30 PM.
In den meisten europäischen Ländern, Lateinamerika und Asien werden Uhrzeiten im 24-Stunden-Format ohne AM- oder PM-Indikatoren verwendet. Dieselbe Zeit erscheint als 15:30.
Auch das Trennzeichen zwischen Stunden und Minuten variiert. Englischsprachige Länder verwenden Doppelpunkte, während einige Locales Punkte oder andere Satzzeichen verwenden.
Die Art und Weise, wie AM und PM erscheinen, unterscheidet sich ebenfalls. Englisch verwendet AM und PM, Spanisch verwendet a.m. und p.m., und in einigen Locales werden diese Indikatoren vor der Zeit statt danach platziert.
Wenn Sie Uhrzeiten anzeigen, müssen Sie sowohl das Stundenformat als auch die spezifischen Formatierungskonventionen an die Erwartungen des Benutzers anpassen.
Verwendung von Intl.DateTimeFormat zur Formatierung von Uhrzeiten
Der Konstruktor Intl.DateTimeFormat erstellt einen Formatierer, der sprachspezifische Konventionen anwendet. Um Uhrzeiten zu formatieren, übergeben Sie eine Gebietsschema-Kennung 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));
// Ausgabe: "3:30 PM"
Dies erstellt einen Formatierer für US-Englisch, der Stunden und Minuten anzeigt. Die Optionen hour und minute teilen dem Formatierer mit, diese Komponenten einzubeziehen. Die Methode format() konvertiert das Date-Objekt in eine Zeichenfolge 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 Formatierer konvertiert dies dann in eine gebietsschemaspezifische Zeitzeichenfolge.
Formatierung derselben Uhrzeit für verschiedene Gebietsschemas
Sie können dieselbe Uhrzeit für verschiedene Gebietsschemas formatieren, indem Sie die dem Konstruktor übergebene Gebietsschema-Kennung ä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));
// Ausgabe: "3:30 PM"
const gbFormatter = new Intl.DateTimeFormat('en-GB', {
hour: 'numeric',
minute: 'numeric'
});
console.log(gbFormatter.format(date));
// Ausgabe: "15:30"
const deFormatter = new Intl.DateTimeFormat('de-DE', {
hour: 'numeric',
minute: 'numeric'
});
console.log(deFormatter.format(date));
// Ausgabe: "15:30"
const frFormatter = new Intl.DateTimeFormat('fr-FR', {
hour: 'numeric',
minute: 'numeric'
});
console.log(frFormatter.format(date));
// Ausgabe: "15:30"
Jeder Formatierer wendet unterschiedliche Konventionen an. Der US-Formatierer verwendet das 12-Stunden-Format mit AM/PM. Die britischen, deutschen und französischen Formatierer 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 der Gebietsschema-Kennung.
Sekunden in der Zeitanzeige einschließen
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 auf die gleiche Weise wie hour und minute. Setzen Sie sie auf 'numeric', um Sekunden in der 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 einzigen 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 aufgefüllt 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 Gebietsschemas, die normalerweise das 24-Stunden-Format verwenden. Die Einstellung hour12: false erzwingt das 24-Stunden-Format auch für Gebietsschemas, die normalerweise das 12-Stunden-Format verwenden.
Das Gebietsschema bestimmt weiterhin andere Formatierungsdetails wie Interpunktion und Abstände. Der britische Formatierer mit hour12: true zeigt 3:30 pm mit Kleinbuchstaben pm an, während ein US-Formatierer 3:30 PM mit Großbuchstaben PM anzeigen würde.
Formatierung von Uhrzeiten für die Locale des Benutzers
Anstatt eine bestimmte Locale 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));
// Ausgabe variiert je nach Locale des Benutzers
// Für en-US: "3:30 PM"
// Für en-GB: "15:30"
// Für de-DE: "15:30"
// Für fr-FR: "15:30"
Dieser Ansatz zeigt Uhrzeiten entsprechend den Erwartungen jedes Benutzers an, ohne dass diese manuell eine Locale 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 ein Fallback-Verhalten zu ermöglichen.
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 bevorzugte Sprache des Benutzers nicht verfügbar ist.
Erstellung von Uhrzeiten zur Formatierung
Sie können Date-Objekte mit Zeitinformationen auf verschiedene Weise 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));
// Ausgabe: "9:00 AM"
console.log(formatter.format(time2));
// Ausgabe: "3:30 PM"
console.log(formatter.format(time3));
// Ausgabe: "11:45 PM"
ISO 8601-Datetime-Strings verwenden das Format YYYY-MM-DDTHH:MM:SS. Das T trennt das Datum von der Uhrzeit. Dieses Format ist eindeutig und funktioniert konsistent über alle Locales und Zeitzonen hinweg.
Formatierung von Uhrzeiten aus Zeitstempeln
Sie können auch Date-Objekte aus Unix-Zeitstempeln erstellen. Ein Unix-Zeitstempel repräsentiert die Anzahl der Millisekunden seit dem 1. Januar 1970 UTC.
const timestamp = 1710515400000; // 15. März 2025 um 15:30 Uhr
const date = new Date(timestamp);
const formatter = new Intl.DateTimeFormat('en-US', {
hour: 'numeric',
minute: 'numeric'
});
console.log(formatter.format(date));
// Ausgabe: "3:30 PM"
Dieser Ansatz funktioniert, wenn Sie Zeitstempel von APIs, Datenbanken oder anderen Systemen erhalten, die Zeiten als Zahlen darstellen.
Sie können den Zeitstempel auch direkt an die format()-Methode übergeben, ohne vorher ein Date-Objekt zu erstellen.
const formatter = new Intl.DateTimeFormat('en-US', {
hour: 'numeric',
minute: 'numeric'
});
const timestamp = 1710515400000;
console.log(formatter.format(timestamp));
// Ausgabe: "3:30 PM"
Die API akzeptiert sowohl Date-Objekte als auch Zeitstempel. Verwenden Sie den Ansatz, der besser zu Ihrem Code passt.
Formatierung der aktuellen Uhrzeit
Um die aktuelle Uhrzeit zu formatieren, erstellen Sie ein Date-Objekt ohne Argumente. Dies erzeugt 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));
// Ausgabe: "3:45:12 PM" (oder aktuelle Zeit bei Ausführung)
Sie können auch Date.now() direkt übergeben, was den aktuellen Zeitstempel als Zahl zurückgibt.
const formatter = new Intl.DateTimeFormat('en-US', {
hour: 'numeric',
minute: 'numeric',
second: 'numeric'
});
console.log(formatter.format(Date.now()));
// Ausgabe: "3:45:12 PM" (oder aktuelle Zeit bei Ausführung)
Beide Ansätze liefern identische Ergebnisse.
Wiederverwendung von Formatierern für bessere Performance
Die Erstellung einer neuen Intl.DateTimeFormat-Instanz beinhaltet das Laden von Gebietsschema-Daten und die Verarbeitung von Optionen. Wenn Sie mehrere Zeiten mit demselben Gebietsschema und denselben Einstellungen formatieren müssen, erstellen Sie den Formatierer 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));
});
// Ausgabe:
// "9:00 AM"
// "12:30 PM"
// "6:45 PM"
Dieser Ansatz ist effizienter als die Erstellung eines neuen Formatierers für jede Uhrzeit. Der Leistungsunterschied wird signifikant, wenn Arrays mit Hunderten oder Tausenden von Zeitwerten formatiert werden.
Formatierung von Uhrzeiten in Templates
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 Zeichenketten funktionieren wie jeder andere Zeichenkettenwert. Sie können sie in Textinhalte, Attribute oder jeden anderen Kontext einfügen, in dem Sie Informationen für Benutzer anzeigen.