Wie man AM/PM oder lokalspezifische Tagesperioden anzeigt
Verwenden Sie JavaScript, um Zeitperioden anzuzeigen, die der Tageseinteilung jeder Kultur entsprechen
Einführung
Wenn Sie eine Uhrzeit wie 4:00 anzeigen, benötigen Benutzer Kontext, um zu wissen, ob diese am Morgen oder am Nachmittag stattfindet. Im Englischen fügt man AM oder PM zur Verdeutlichung hinzu. 4:00 AM ist vor Sonnenaufgang, während 4:00 PM am Nachmittag ist.
Andere Sprachen übersetzen AM und PM nicht einfach. Viele Kulturen teilen den Tag in mehr als zwei Perioden ein, mit spezifischen Begriffen für frühen Morgen, späten Vormittag, Nachmittag, Abend und Nacht. Spanisch hat "madrugada" für die Stunden nach Mitternacht, aber vor der Morgendämmerung. Deutsch teilt den Tag in sechs verschiedene Perioden statt zwei. In einigen Sprachen wird 1:00 AM als "1 in der Nacht" statt "1 am Morgen" bezeichnet.
JavaScripts Intl.DateTimeFormat bietet die Option dayPeriod, um diese kulturspezifischen Tagesabschnitte automatisch anzuzeigen. Diese Lektion erklärt, wie Tagesperioden in verschiedenen Kulturen funktionieren, warum sie für internationale Anwendungen wichtig sind und wie man Uhrzeiten mit passenden Tagesperioden-Bezeichnungen formatiert.
Warum Tagesperioden je nach Kultur variieren
Verschiedene Kulturen haben unterschiedliche Methoden entwickelt, den 24-Stunden-Tag in benannte Perioden einzuteilen. Diese Einteilungen spiegeln wider, wie Menschen in jeder Kultur über Zeit denken und sprechen.
Englischsprachige teilen den Tag in vier Perioden ein. Der Morgen (Morning) geht von Mitternacht bis Mittag, der Nachmittag (Afternoon) vom Mittag bis zum Abend, der Abend (Evening) vom späten Nachmittag bis zur Dunkelheit und die Nacht (Night) von der Dunkelheit bis Mitternacht. Die Begriffe AM und PM bieten ein einfacheres Zwei-Perioden-System für die 12-Stunden-Uhr.
Spanischsprachige erkennen "madrugada" als eine eigene Periode an, die die Stunden nach Mitternacht, aber vor dem typischen Aufwachen der Menschen umfasst. Dies schafft ein Fünf-Perioden-System, das zwischen späten Nachtstunden und frühen Morgenstunden unterscheidet.
Russischsprachige verwenden "ночь" (Nacht) für jede Stunde, in der Menschen typischerweise schlafen. 1:00 AM ist "1 in der Nacht" statt "1 am Morgen", weil Menschen zu dieser Stunde normalerweise schlafen.
Deutsch teilt den Tag in sechs Perioden ein. "Morgen", "Vormittag", "Mittag", "Nachmittag", "Abend" und "Nacht" decken jeweils spezifische Stundenbereiche ab.
Indonesisch verwendet "pagi" (Morgendämmerung bis 10 Uhr), "siang" (10 Uhr bis 14 Uhr), "sore" (14 Uhr bis Sonnenuntergang) und "malam" (Nacht), um den Tag basierend auf der Position der Sonne in vier Perioden einzuteilen.
Bengalisch teilt den Tag in sechs Perioden ein. "ভোর" (Morgendämmerung), "সকাল" (Morgen), "দুপুর" (früher Nachmittag), "বিকাল" (später Nachmittag), "সন্ধ্যা" (Abend) und "রাত" (Nacht) haben jeweils spezifische Zeitbereiche.
Wenn Sie Uhrzeiten in einer internationalen Anwendung anzeigen, müssen Sie Begriffe verwenden, die der natürlichen Zeitsprache der Benutzer in jeder Kultur entsprechen. Wenn Sie allen Benutzern "4 AM" anzeigen, ignorieren Sie, wie andere Sprachen diese Stunde beschreiben.
Die dayPeriod-Option verstehen
Die Option dayPeriod in Intl.DateTimeFormat weist den Formatierer an, die sprachspezifische Tagesperiode bei der Formatierung einer Uhrzeit einzubeziehen. Anstatt nur Stunde und Minute anzuzeigen, fügt der Formatierer den entsprechenden Begriff für diese Tageszeit in der Zielsprache hinzu.
Diese Option funktioniert nur mit 12-Stunden-Zeitformaten. In 24-Stunden-Formaten bietet die Stundenzahl selbst genügend Kontext. 04:00 ist eindeutig morgens und 16:00 ist eindeutig nachmittags ohne zusätzliche Bezeichnungen. Tagesperioden existieren, um die wiederholten Stunden im 12-Stunden-Format zu unterscheiden.
Die Option dayPeriod akzeptiert drei Werte. narrow erzeugt die kürzestmögliche Form, oft einen einzelnen Buchstaben oder eine Abkürzung. short erzeugt eine abgekürzte Form. long erzeugt das vollständige Wort oder die vollständige Phrase.
Für viele Spracheinstellungen erzeugen diese drei Werte identische Ausgaben. Die Unicode-Sprachdaten definieren nicht für jede Kombination aus Spracheinstellung und Formatlänge unterschiedliche Formen. Wenn keine unterschiedlichen Formen existieren, verwendet der Formatierer dieselbe Ausgabe, unabhängig davon, welchen Wert Sie angeben.
Formatierung von Uhrzeiten mit Tagesperioden
Um eine Tagesperiode anzuzeigen, erstellen Sie eine Intl.DateTimeFormat-Instanz mit der Option dayPeriod auf narrow, short oder long gesetzt. Sie müssen auch eine Zeitkomponentenoption wie hour einschließen und ein 12-Stunden-Format mit hourCycle angeben.
const date = new Date('2025-01-15T04:30:00');
const formatter = new Intl.DateTimeFormat('en-US', {
hour: 'numeric',
minute: 'numeric',
hourCycle: 'h12',
dayPeriod: 'long'
});
console.log(formatter.format(date));
// Output: "4:30 in the morning"
Dies erstellt einen Formatierer, der Stunde, Minute und Tagesperiode anzeigt. Die Option hourCycle: 'h12' gibt das 12-Stunden-Format an, was erforderlich ist, damit Tagesperioden erscheinen. Die Option dayPeriod: 'long' fordert die vollständige Tagesperioden-Phrase an.
Ohne die Option dayPeriod würde der Formatierer stattdessen "4:30 AM" anzeigen. Die Tagesperioden-Option ersetzt den einfachen AM/PM-Indikator durch eine aussagekräftigere Phrase.
Anzeigen von Tagesabschnitten zu verschiedenen Zeiten
Tagesabschnitte ändern sich basierend auf der zu formatierenden Zeit. Der Formatierer wählt automatisch den passenden Abschnitt für jede Zeit gemäß den Konventionen der Locale aus.
const options = {
hour: 'numeric',
minute: 'numeric',
hourCycle: 'h12',
dayPeriod: 'long'
};
const formatter = new Intl.DateTimeFormat('en-US', options);
const morning = new Date('2025-01-15T04:30:00');
console.log(formatter.format(morning));
// Output: "4:30 in the morning"
const afternoon = new Date('2025-01-15T14:30:00');
console.log(formatter.format(afternoon));
// Output: "2:30 in the afternoon"
const evening = new Date('2025-01-15T20:30:00');
console.log(formatter.format(evening));
// Output: "8:30 in the evening"
const night = new Date('2025-01-15T23:30:00');
console.log(formatter.format(night));
// Output: "11:30 at night"
Englisch unterscheidet zwischen Morgen, Nachmittag, Abend und Nacht. Jede Zeit erhält die entsprechende Phrase basierend auf der Stunde. Sie müssen nicht selbst bestimmen, welcher Abschnitt zutrifft. Der Formatierer übernimmt dies automatisch basierend auf Unicode-Locale-Daten.
Vergleich von schmalen, kurzen und langen Formaten
Die drei Formatlängen erzeugen in einigen Locales unterschiedliche Ausgaben. Die Unterschiede variieren je nach Sprache und können subtil sein oder gar nicht existieren.
const date = new Date('2025-01-15T04:30:00');
const narrow = new Intl.DateTimeFormat('en-US', {
hour: 'numeric',
hourCycle: 'h12',
dayPeriod: 'narrow'
});
console.log(narrow.format(date));
// Output: "4 in the morning"
const short = new Intl.DateTimeFormat('en-US', {
hour: 'numeric',
hourCycle: 'h12',
dayPeriod: 'short'
});
console.log(short.format(date));
// Output: "4 in the morning"
const long = new Intl.DateTimeFormat('en-US', {
hour: 'numeric',
hourCycle: 'h12',
dayPeriod: 'long'
});
console.log(long.format(date));
// Output: "4 in the morning"
Für US-Englisch erzeugen alle drei Längen identische Ausgaben. Die Locale-Daten definieren keine unterschiedlichen Formen für diese Kombination aus Sprache und Zeit.
Einige Locales unterscheiden zwischen den Längen. Französisch erzeugt unterschiedliche Ausgaben für schmale und lange Formate.
const date = new Date('2025-01-15T04:30:00');
const frNarrow = new Intl.DateTimeFormat('fr-FR', {
hour: 'numeric',
hourCycle: 'h12',
dayPeriod: 'narrow'
});
console.log(frNarrow.format(date));
// Output: "4 mat."
const frLong = new Intl.DateTimeFormat('fr-FR', {
hour: 'numeric',
hourCycle: 'h12',
dayPeriod: 'long'
});
console.log(frLong.format(date));
// Output: "4 du matin"
Französisch verwendet "mat." als abgekürzte Form und "du matin" als lange Form. Beide bedeuten Morgen, aber die lange Form ist expliziter.
Wenn Sie keine spezifischen Platzbeschränkungen haben, die die kürzestmögliche Ausgabe erfordern, verwenden Sie long für mehr Klarheit. Die längeren Formen sind für Benutzer leichter zu verstehen, und viele Locales bieten ohnehin keine kürzeren Alternativen an.
Wie Tagesabschnitte in verschiedenen Sprachen funktionieren
Verschiedene Sprachregionen verwenden unterschiedliche Begriffe für Tagesabschnitte und teilen den Tag an unterschiedlichen Grenzen ein. Der Formatierer wendet automatisch die Konventionen für jede Sprachregion an.
const date = new Date('2025-01-15T04:30:00');
const options = {
hour: 'numeric',
hourCycle: 'h12',
dayPeriod: 'long'
};
const enUS = new Intl.DateTimeFormat('en-US', options);
console.log(enUS.format(date));
// Output: "4 in the morning"
const enGB = new Intl.DateTimeFormat('en-GB', options);
console.log(enGB.format(date));
// Output: "4 at night"
const deDK = new Intl.DateTimeFormat('de-DE', options);
console.log(deDK.format(date));
// Output: "4 morgens"
const fr = new Intl.DateTimeFormat('fr-FR', options);
console.log(fr.format(date));
// Output: "4 du matin"
Britisches Englisch betrachtet 4:30 Uhr als "at night" (in der Nacht) und nicht als "in the morning" (am Morgen), was unterschiedliche kulturelle Grenzen für Tagesabschnitte widerspiegelt. Deutsch verwendet "morgens" für die Morgenstunden. Französisch verwendet "du matin" für denselben Zeitraum.
Diese Unterschiede sind keine Fehler oder Inkonsistenzen. Sie spiegeln echte kulturelle Unterschiede wider, wie Menschen Zeit konzeptualisieren und darüber sprechen. Der Formatierer berücksichtigt diese Unterschiede automatisch basierend auf der Sprachregion.
Tagesabschnitte erfordern das 12-Stunden-Format
Die Option dayPeriod funktioniert nur, wenn ein 12-Stunden-Format mit hourCycle: 'h12' oder hourCycle: 'h11' angegeben wird. Ohne ein 12-Stunden-Format erscheinen keine Tagesabschnitte.
const date = new Date('2025-01-15T04:30:00');
const with12Hour = new Intl.DateTimeFormat('en-US', {
hour: 'numeric',
hourCycle: 'h12',
dayPeriod: 'long'
});
console.log(with12Hour.format(date));
// Output: "4 in the morning"
const with24Hour = new Intl.DateTimeFormat('en-US', {
hour: 'numeric',
hourCycle: 'h23',
dayPeriod: 'long'
});
console.log(with24Hour.format(date));
// Output: "04"
Das 24-Stunden-Format zeigt den Tagesabschnitt nicht an, auch wenn die Option angegeben ist. Im 24-Stunden-Format bietet die Stundenzahl ausreichend Kontext ohne zusätzliche Bezeichnungen.
Der Unterschied zwischen h12 und h11 bezieht sich darauf, wie Mitternacht und Mittag nummeriert werden. Verwenden Sie h12 für die Standard-12-Stunden-Uhr, bei der die Stunden von 1 bis 12 gehen. Verwenden Sie h11 für ein 0-bis-11-Stunden-System. Beide funktionieren mit Tagesabschnitten.
Kombination von Tagesabschnitten mit Minuten und Sekunden
Sie können Minuten und Sekunden zusammen mit Tagesabschnitten verwenden. Der Formatierer positioniert den Tagesabschnitt entsprechend den Konventionen der jeweiligen Sprache.
const date = new Date('2025-01-15T04:30:45');
const withMinutes = new Intl.DateTimeFormat('en-US', {
hour: 'numeric',
minute: 'numeric',
hourCycle: 'h12',
dayPeriod: 'long'
});
console.log(withMinutes.format(date));
// Output: "4:30 in the morning"
const withSeconds = new Intl.DateTimeFormat('en-US', {
hour: 'numeric',
minute: 'numeric',
second: 'numeric',
hourCycle: 'h12',
dayPeriod: 'long'
});
console.log(withSeconds.format(date));
// Output: "4:30:45 in the morning"
Der Tagesabschnitt erscheint nach den Zeitkomponenten. Sie müssen den Tagesabschnitt nicht manuell positionieren oder formatieren. Der Formatierer übernimmt das Layout gemäß den lokalen Konventionen.
Formatierung von Uhrzeiten mit Tagesabschnitten für die Sprache des Benutzers
Anstatt eine bestimmte Sprache fest zu codieren, verwenden Sie die bevorzugte Sprache des Benutzers aus dem Browser. Die Eigenschaft navigator.language gibt die bevorzugte Sprache des Benutzers zurück.
const date = new Date('2025-01-15T04:30:00');
const formatter = new Intl.DateTimeFormat(navigator.language, {
hour: 'numeric',
minute: 'numeric',
hourCycle: 'h12',
dayPeriod: 'long'
});
console.log(formatter.format(date));
// Output variiert je nach Sprache des Benutzers
// Für en-US: "4:30 in the morning"
// Für en-GB: "4:30 at night"
// Für de-DE: "4:30 morgens"
// Für fr-FR: "4:30 du matin"
Dieser Ansatz zeigt Uhrzeiten mit Tagesabschnitten an, die der natürlichen Sprechweise des jeweiligen Benutzers entsprechen. Der Browser liefert die Spracheinstellung, und die Intl-API wendet die entsprechenden Tagesabschnittsbegriffe und -grenzen an.
Wann Tagesabschnitte verwendet werden sollten
Tagesabschnitte eignen sich gut, wenn Sie mehr Kontext als einfache AM/PM-Indikatoren bieten möchten. Sie machen Zeitangaben gesprächiger und leichter auf einen Blick zu erfassen.
Verwenden Sie Tagesabschnitte in Benutzeroberflächen, in denen Uhrzeiten neben beschreibendem Text erscheinen. Ein Kalender mit "4:30 morgens" ist klarer als "4:30 AM", da die Phrase in laufendem Text natürlicher klingt.
Verwenden Sie Tagesabschnitte in Benachrichtigungen und Nachrichten, bei denen eine gesprächige Sprache die Lesbarkeit verbessert. "Ihr Meeting beginnt um 20:30 abends" liest sich besser als "Ihr Meeting beginnt um 20:30 PM".
Vermeiden Sie Tagesabschnitte in kompakten Anzeigen, in denen der Platz begrenzt ist. Tabellen, Diagramme und dichte Layouts funktionieren besser mit Standard-AM/PM-Indikatoren oder dem 24-Stunden-Format.
Vermeiden Sie Tagesabschnitte bei der Anzeige von Uhrzeiten im 24-Stunden-Format. Der Tagesabschnitt fügt keine nützlichen Informationen hinzu, wenn die Stundenzahl bereits die Tageszeit angibt.
Zusammenfassung
Die Option dayPeriod in Intl.DateTimeFormat zeigt kulturspezifische Begriffe für Tageszeiten an. Verschiedene Kulturen teilen den Tag unterschiedlich ein und verwenden Begriffe wie "madrugada" im Spanischen oder sechs verschiedene Perioden im Deutschen anstelle von nur AM und PM.
Die Option akzeptiert drei Werte. narrow erzeugt die kürzeste Form, short erzeugt eine abgekürzte Form und long erzeugt die vollständige Phrase. Viele Spracheinstellungen erzeugen für alle drei Werte identische Ausgaben.
Tagesperioden erscheinen nur bei Verwendung des 12-Stunden-Formats, das mit hourCycle: 'h12' oder hourCycle: 'h11' angegeben wird. Sie erscheinen nicht im 24-Stunden-Format, da die Stundenzahl ausreichend Kontext bietet.
Verschiedene Spracheinstellungen verwenden unterschiedliche Begriffe für Tagesperioden und ziehen Grenzen zu unterschiedlichen Stunden. Der Formatierer wendet diese Konventionen automatisch basierend auf der Sprachkennung an. Britisches Englisch behandelt 4:30 AM als "at night", während amerikanisches Englisch es als "in the morning" behandelt.