Wie man Datumsangaben als kurz, mittel, lang oder vollständig formatiert
Verwenden Sie vordefinierte Datums- und Zeitstile, um den Formatierungsdetailgrad zu steuern, ohne einzelne Komponenten konfigurieren zu müssen
Einführung
Die Formatierung von Datumsangaben erfordert die Auswahl der anzuzeigenden Komponenten und deren Darstellungsweise. Man kann den Wochentag, Monatsnamen, Tag, Jahr, Stunden, Minuten und die Zeitzone anzeigen. Jede Komponente hat ihre eigenen Formatierungsoptionen. Die individuelle Konfiguration all dieser Optionen führt zu umfangreichem Code und erfordert ein Verständnis dafür, welche Kombinationen gut zusammenpassen.
JavaScripts Intl.DateTimeFormat bietet vordefinierte Stile, die gängige Formatierungsoptionen in einfachen Einstellungen bündeln. Anstatt festzulegen, dass man einen numerischen Monat, numerischen Tag und numerisches Jahr haben möchte, kann man dateStyle: "short" anfordern. Anstatt die Anzeige von Stunden, Minuten und Sekunden zu konfigurieren, kann man timeStyle: "medium" anfordern.
Diese vordefinierten Einstellungen funktionieren in allen Locales. Der gleiche Stil erzeugt angemessene Ausgaben, unabhängig davon, ob für amerikanisches Englisch, Deutsch, Japanisch oder Arabisch formatiert wird. Diese Lektion erklärt, was jede Stilebene bietet und wann man welche verwenden sollte.
Was dateStyle und timeStyle sind
Die Option dateStyle steuert, wie Datumsangaben erscheinen. Sie beeinflusst, welche Datumskomponenten angezeigt werden und wie detailliert sie sind. Die Option akzeptiert vier Werte: "short", "medium", "long" und "full".
Die Option timeStyle steuert, wie Zeitangaben erscheinen. Sie beeinflusst, welche Zeitkomponenten angezeigt werden und wie detailliert sie sind. Die Option akzeptiert die gleichen vier Werte: "short", "medium", "long" und "full".
Beide Optionen bieten Abkürzungen für die gleichzeitige Einstellung mehrerer Formatierungsoptionen. Wenn man einen Stil angibt, wählt der Formatierer automatisch geeignete Werte für Komponenten wie Wochentag, Monat, Tag, Jahr, Stunde, Minute, Sekunde und Zeitzonenname basierend auf dem Locale aus.
const formatter = new Intl.DateTimeFormat("en-US", {
dateStyle: "short"
});
console.log(formatter.format(new Date("2025-03-15")));
// Output: "3/15/25"
Diese einzelne Option ersetzt, was sonst die Einstellung mehrerer individueller Komponentenoptionen erfordern würde.
Die vier Stilebenen verstehen
Jede Stilebene repräsentiert ein unterschiedliches Gleichgewicht zwischen Kürze und Detail. Kurze Stile minimieren den Platzbedarf durch Weglassen von Komponenten und Verwendung numerischer Formate. Vollständige Stile maximieren die Klarheit, indem sie alle relevanten Komponenten einbeziehen und Wörter ausschreiben.
Der "short" Stil erzeugt kompakte Ausgaben, die für begrenzte Platzverhältnisse geeignet sind. Er verwendet typischerweise numerische Formate und lässt ergänzende Informationen wie Wochentagsnamen weg.
Der "medium" Stil bietet moderate Detailtiefe. Er enthält oft abgekürzte Monatsnamen und ausgewogene Zeitpräzision.
Der "long" Stil fügt mehr Kontext hinzu. Er schreibt Monatsnamen in der Regel vollständig aus und enthält zusätzliche Komponenten wie Zeitzonenangaben.
Der "full" Stil erzeugt die vollständigste Darstellung. Er enthält alle relevanten Komponenten wie Wochentagsnamen, vollständige Monatsnamen und komplette Zeitzonennamen.
Die genauen Komponenten und Formatierungen für jeden Stil variieren je nach Gebietsschema. Amerikanisches Englisch könnte Monate anders darstellen als Deutsch oder Japanisch, aber das relative Detailniveau bleibt über alle Gebietsschemas hinweg konsistent.
Datumsformatierung mit dateStyle
Die Option dateStyle steuert die Datumsformatierung. Jede Stilebene erzeugt unterschiedliche Ausgaben für dasselbe Datum.
const date = new Date("2025-03-15T14:30:00");
const shortFormatter = new Intl.DateTimeFormat("en-US", {
dateStyle: "short"
});
const mediumFormatter = new Intl.DateTimeFormat("en-US", {
dateStyle: "medium"
});
const longFormatter = new Intl.DateTimeFormat("en-US", {
dateStyle: "long"
});
const fullFormatter = new Intl.DateTimeFormat("en-US", {
dateStyle: "full"
});
console.log(shortFormatter.format(date));
// Output: "3/15/25"
console.log(mediumFormatter.format(date));
// Output: "Mar 15, 2025"
console.log(longFormatter.format(date));
// Output: "March 15, 2025"
console.log(fullFormatter.format(date));
// Output: "Saturday, March 15, 2025"
Der kurze Stil verwendet ausschließlich numerische Werte und ist damit am kompaktesten. Der mittlere Stil kürzt den Monatsnamen ab. Der lange Stil schreibt den Monat vollständig aus. Der vollständige Stil fügt den Wochentagsnamen für den kompletten Kontext hinzu.
Formatieren von Uhrzeiten mit timeStyle
Die Option timeStyle steuert die Formatierung der Uhrzeit. Jede Stilebene zeigt unterschiedliche Zeitkomponenten an.
const date = new Date("2025-03-15T14:30:45");
const shortFormatter = new Intl.DateTimeFormat("en-US", {
timeStyle: "short"
});
const mediumFormatter = new Intl.DateTimeFormat("en-US", {
timeStyle: "medium"
});
const longFormatter = new Intl.DateTimeFormat("en-US", {
timeStyle: "long"
});
const fullFormatter = new Intl.DateTimeFormat("en-US", {
timeStyle: "full"
});
console.log(shortFormatter.format(date));
// Output: "2:30 PM"
console.log(mediumFormatter.format(date));
// Output: "2:30:45 PM"
console.log(longFormatter.format(date));
// Output: "2:30:45 PM PST"
console.log(fullFormatter.format(date));
// Output: "2:30:45 PM Pacific Standard Time"
Der kurze Stil (short) zeigt nur Stunden und Minuten an. Der mittlere Stil (medium) fügt Sekunden hinzu. Der lange Stil (long) enthält die abgekürzte Zeitzone. Der vollständige Stil (full) schreibt den kompletten Namen der Zeitzone aus.
Kombination von dateStyle und timeStyle
Sie können beide Optionen zusammen verwenden, um vollständige Zeitstempel zu formatieren. Der Formatierer wendet beide Stile unabhängig voneinander an.
const date = new Date("2025-03-15T14:30:45");
const formatter = new Intl.DateTimeFormat("en-US", {
dateStyle: "long",
timeStyle: "short"
});
console.log(formatter.format(date));
// Output: "March 15, 2025 at 2:30 PM"
Das Datum erscheint mit langer Formatierung, während die Uhrzeit die kurze Formatierung verwendet. Diese Kombination bietet einen detaillierten Datumskontext, während die Zeitangabe prägnant bleibt.
Sie können jede Datumsstilart mit jeder Zeitstilart nach Ihren Bedürfnissen kombinieren.
const date = new Date("2025-03-15T14:30:45");
const combinations = [
{ dateStyle: "short", timeStyle: "short" },
{ dateStyle: "medium", timeStyle: "medium" },
{ dateStyle: "long", timeStyle: "long" },
{ dateStyle: "full", timeStyle: "full" }
];
combinations.forEach(options => {
const formatter = new Intl.DateTimeFormat("en-US", options);
console.log(formatter.format(date));
});
// Output:
// "3/15/25, 2:30 PM"
// "Mar 15, 2025, 2:30:45 PM"
// "March 15, 2025 at 2:30:45 PM PST"
// "Saturday, March 15, 2025 at 2:30:45 PM Pacific Standard Time"
Die Verwendung übereinstimmender Stilebenen erzeugt konsistente Details sowohl für Datum als auch für Uhrzeit. Das Mischen von Stilen ermöglicht es Ihnen, einen Aspekt gegenüber dem anderen hervorzuheben.
Wie Datumsstile in verschiedenen Sprachräumen variieren
Jeder Sprachraum formatiert Datumsangaben nach seinen eigenen Konventionen. Der gleiche Stil erzeugt unterschiedliche Ausgaben für verschiedene Sprachräume, aber der relative Detailgrad bleibt konsistent.
const date = new Date("2025-03-15T14:30:00");
const locales = ["en-US", "de-DE", "fr-FR", "ja-JP"];
locales.forEach(locale => {
const shortFormatter = new Intl.DateTimeFormat(locale, {
dateStyle: "short"
});
const fullFormatter = new Intl.DateTimeFormat(locale, {
dateStyle: "full"
});
console.log(`${locale}:`);
console.log(` Short: ${shortFormatter.format(date)}`);
console.log(` Full: ${fullFormatter.format(date)}`);
});
// Output:
// en-US:
// Short: 3/15/25
// Full: Saturday, March 15, 2025
// de-DE:
// Short: 15.03.25
// Full: Samstag, 15. März 2025
// fr-FR:
// Short: 15/03/2025
// Full: samedi 15 mars 2025
// ja-JP:
// Short: 2025/03/15
// Full: 2025年3月15日土曜日
Amerikanisches Englisch verwendet die Reihenfolge Monat/Tag/Jahr. Deutsch verwendet Tag.Monat.Jahr mit Punkten als Trennzeichen. Französisch verwendet Tag/Monat/Jahr. Japanisch verwendet Jahr/Monat/Tag mit Kanji-Zeichen. Der vollständige Stil fügt Wochentagsnamen in jeder Sprache mit entsprechender Formatierung hinzu.
Wie Zeitstile in verschiedenen Sprachräumen variieren
Die Zeitformatierung passt sich ebenfalls an die Konventionen des Sprachraums an. Einige Sprachräume verwenden 12-Stunden-Uhren mit AM/PM-Anzeigen, während andere 24-Stunden-Uhren verwenden.
const date = new Date("2025-03-15T14:30:45");
const locales = ["en-US", "de-DE", "fr-FR", "ja-JP"];
locales.forEach(locale => {
const shortFormatter = new Intl.DateTimeFormat(locale, {
timeStyle: "short"
});
const longFormatter = new Intl.DateTimeFormat(locale, {
timeStyle: "long"
});
console.log(`${locale}:`);
console.log(` Short: ${shortFormatter.format(date)}`);
console.log(` Long: ${longFormatter.format(date)}`);
});
// Output:
// en-US:
// Short: 2:30 PM
// Long: 2:30:45 PM PST
// de-DE:
// Short: 14:30
// Long: 14:30:45 PST
// fr-FR:
// Short: 14:30
// Long: 14:30:45 UTC−8
// ja-JP:
// Short: 14:30
// Long: 14:30:45 PST
Amerikanisches Englisch verwendet das 12-Stunden-Format mit AM/PM. Deutsch, Französisch und Japanisch verwenden das 24-Stunden-Format. Der lange Stil fügt Zeitzonenangaben mit für jeden Sprachraum angemessener Formatierung hinzu.
Wann der Kurzstil verwendet werden sollte
Der Kurzstil funktioniert am besten, wenn der Platz begrenzt ist oder wenn Datumsangaben in kompakte Layouts passen müssen. Mobile Benutzeroberflächen, Datentabellen und kompakte Anzeigen profitieren von minimaler Datumsformatierung.
Verwenden Sie den kurzen Datumsstil für die Anzeige von Daten in Tabellenspalten, Listenelementen oder überall dort, wo der horizontale Platz eingeschränkt ist. Das numerische Format benötigt weniger Zeichen als ausgeschriebene Monate oder Wochentagsnamen.
const formatter = new Intl.DateTimeFormat(navigator.language, {
dateStyle: "short"
});
const events = [
{ name: "Team meeting", date: new Date("2025-03-15") },
{ name: "Project deadline", date: new Date("2025-03-28") },
{ name: "Conference", date: new Date("2025-04-05") }
];
events.forEach(event => {
console.log(`${event.name}: ${formatter.format(event.date)}`);
});
Verwenden Sie den kurzen Zeitstil für die Anzeige von Uhrzeiten in Zeitplänen, Kalendern oder überall dort, wo eine Präzision auf die Sekunde unnötig ist. Die meisten Kontexte benötigen nur Stunden und Minuten.
Wann der mittlere Stil verwendet werden sollte
Der mittlere Stil balanciert Detail und Platz. Er bietet mehr Kontext als der Kurzstil ohne die Ausführlichkeit des langen oder vollständigen Stils. Dies macht ihn für die meisten allgemeinen Datums- und Zeitanzeigen geeignet.
Verwenden Sie den mittleren Datumsstil, wenn Sie mäßig Platz haben und möchten, dass Datumsangaben besser lesbar sind als rein numerische Formate. Abgekürzte Monatsnamen helfen Benutzern, Monate schneller zu identifizieren als Zahlen.
const formatter = new Intl.DateTimeFormat(navigator.language, {
dateStyle: "medium"
});
const milestone = new Date("2025-03-15");
console.log(`Project completion: ${formatter.format(milestone)}`);
// Output: "Project completion: Mar 15, 2025"
Verwenden Sie den mittleren Zeitstil, wenn Sie Sekundenpräzision benötigen, aber Zeitzonen implizit halten möchten. Dies funktioniert für die Anzeige präziser Zeitstempel in Anwendungsprotokollen oder Aktivitätsfeeds, bei denen Benutzer den Zeitzonenkontext verstehen.
Wann der lange Stil verwendet werden sollte
Der lange Stil bietet zusätzliche Details, ohne so ausführlich wie der vollständige Stil zu werden. Er schreibt Informationen vollständig aus, lässt aber ergänzende Komponenten wie Wochentagsnamen weg.
Verwenden Sie den langen Datumsformat für wichtige Daten, die Betonung verdienen, oder wenn Daten natürlicher lesbar sein sollen. Vollständig ausgeschriebene Monatsnamen sind leichter zu erfassen als Abkürzungen.
const formatter = new Intl.DateTimeFormat(navigator.language, {
dateStyle: "long"
});
const releaseDate = new Date("2025-03-15");
console.log(`Release date: ${formatter.format(releaseDate)}`);
// Output: "Release date: 15. März 2025"
Verwenden Sie den langen Zeitstil, wenn Zeitzonenangaben wichtig sind. Dies hilft Benutzern zu verstehen, wann Ereignisse relativ zu ihrer eigenen Zeitzone stattgefunden haben oder stattfinden werden.
const formatter = new Intl.DateTimeFormat(navigator.language, {
timeStyle: "long",
timeZone: "America/New_York"
});
const callTime = new Date("2025-03-15T14:30:00");
console.log(`Conference call: ${formatter.format(callTime)}`);
// Output: "Conference call: 14:30:45 EST"
Wann der vollständige Stil verwendet werden sollte
Der vollständige Stil erzeugt die umfassendste Datums- und Zeitdarstellung. Er enthält alle relevanten Komponenten und eignet sich für Kontexte, in denen Klarheit und Vollständigkeit wichtiger sind als Platzeffizienz.
Verwenden Sie den vollständigen Datumsformat für die Anzeige von Daten, die maximalen Kontext benötigen. Das Hinzufügen des Wochentags hilft Benutzern, Daten im Wochenkalender zu platzieren, was für Terminplanung und das Verständnis zeitlicher Beziehungen nützlich ist.
const formatter = new Intl.DateTimeFormat(navigator.language, {
dateStyle: "full"
});
const appointmentDate = new Date("2025-03-15");
console.log(`Appointment: ${formatter.format(appointmentDate)}`);
// Output: "Appointment: Samstag, 15. März 2025"
Verwenden Sie den vollständigen Zeitstil, wenn Sie Zeiten anzeigen, die einen vollständigen Zeitzonenkontext benötigen. Das Ausschreiben des vollständigen Zeitzonennamens beseitigt Unklarheiten für Benutzer in verschiedenen Regionen.
const formatter = new Intl.DateTimeFormat(navigator.language, {
dateStyle: "full",
timeStyle: "full"
});
const eventTime = new Date("2025-03-15T14:30:00");
console.log(formatter.format(eventTime));
// Output: "Samstag, 15. März 2025 um 14:30:45 Nordamerikanische Pazifik-Standardzeit"
Der vollständige Stil eignet sich gut für die Anzeige einzelner wichtiger Ereignisse, Bestätigungsnachrichten oder überall dort, wo Benutzer von einem vollständigen zeitlichen Kontext profitieren.
Die Einschränkungen verstehen
Die Optionen dateStyle und timeStyle können nicht mit individuellen Komponentenoptionen verwendet werden. Sie müssen sich zwischen der Verwendung von Stilvorlagen oder der individuellen Konfiguration von Komponenten entscheiden.
Dies wird nicht funktionieren:
const formatter = new Intl.DateTimeFormat("en-US", {
dateStyle: "medium",
weekday: "long" // Fehler: kann nicht kombiniert werden
});
Die Option dateStyle bestimmt bereits die Formatierung des Wochentags. Das Hinzufügen einer expliziten Option weekday erzeugt einen Konflikt. Die gleiche Einschränkung gilt für timeStyle mit Komponentenoptionen wie hour, minute oder second.
Wenn Sie mehr Kontrolle über bestimmte Komponenten benötigen, lassen Sie die Stiloptionen weg und konfigurieren Sie die Komponenten einzeln.
const formatter = new Intl.DateTimeFormat("en-US", {
weekday: "long",
year: "numeric",
month: "long",
day: "numeric"
});
console.log(formatter.format(new Date("2025-03-15")));
// Ausgabe: "Saturday, March 15, 2025"
Sie können dateStyle und timeStyle zusammen verwenden, da sie unterschiedliche Aspekte der Formatierung steuern. Sie können sie auch mit Optionen kombinieren, die nicht in Konflikt stehen, wie timeZone, calendar oder numberingSystem.
const formatter = new Intl.DateTimeFormat("en-US", {
dateStyle: "long",
timeStyle: "long",
timeZone: "America/New_York"
});
console.log(formatter.format(new Date("2025-03-15T14:30:00")));
// Ausgabe: "March 15, 2025 at 2:30:45 PM EST"
Datumsformatierung für die Locale des Benutzers
Verwenden Sie die Spracheinstellungen des Browsers, um Datumsangaben entsprechend den Erwartungen jedes Benutzers zu formatieren. Die Eigenschaft navigator.language liefert die bevorzugte Locale des Benutzers.
const formatter = new Intl.DateTimeFormat(navigator.language, {
dateStyle: "long",
timeStyle: "short"
});
const date = new Date("2025-03-15T14:30:00");
console.log(formatter.format(date));
// Ausgabe variiert je nach Locale des Benutzers
// Für en-US: "March 15, 2025 at 2:30 PM"
// Für de-DE: "15. März 2025 um 14:30"
// Für fr-FR: "15 mars 2025 à 14:30"
Sie können auch das gesamte Array navigator.languages übergeben, um Fallback-Verhalten zu ermöglichen. Der Formatierer verwendet die erste Locale aus dem Array, die er unterstützt.
const formatter = new Intl.DateTimeFormat(navigator.languages, {
dateStyle: "medium"
});
Formatierer für bessere Performance wiederverwenden
Das Erstellen von Intl.DateTimeFormat-Instanzen beinhaltet die Verarbeitung von Locale-Daten und Optionen. Wenn mehrere Datumsangaben mit den gleichen Einstellungen formatiert werden, sollte der Formatierer einmal erstellt und wiederverwendet werden.
const formatter = new Intl.DateTimeFormat(navigator.language, {
dateStyle: "medium",
timeStyle: "short"
});
const events = [
new Date("2025-03-15T14:30:00"),
new Date("2025-03-16T10:00:00"),
new Date("2025-03-17T16:45:00")
];
events.forEach(date => {
console.log(formatter.format(date));
});
// Output:
// "Mar 15, 2025, 2:30 PM"
// "Mar 16, 2025, 10:00 AM"
// "Mar 17, 2025, 4:45 PM"
Dieses Muster verbessert die Performance beim Formatieren von Datums-Arrays oder beim Anzeigen vieler Zeitstempel in einer Benutzeroberfläche.
Was man sich merken sollte
Die Optionen dateStyle und timeStyle bieten vordefinierte Formatierungsstufen: "short", "medium", "long" und "full". Jede Stufe repräsentiert ein unterschiedliches Gleichgewicht zwischen Kürze und Detail, wobei "short" am kompaktesten und "full" am vollständigsten ist.
Verwenden Sie diese vordefinierten Einstellungen anstatt einzelne Datums- und Zeitkomponenten manuell zu konfigurieren. Die vordefinierten Einstellungen erzeugen für jedes Locale angemessene Ausgaben, ohne dass man die lokalspezifischen Formatierungsregeln verstehen muss.
Man kann dateStyle und timeStyle zusammen verwenden, aber nicht mit individuellen Komponentenoptionen wie weekday oder hour kombinieren. Wählen Sie zwischen vordefinierten Stilen für Einfachheit oder individuellen Komponenten für präzise Kontrolle.
Formatieren Sie Datumsangaben mit dem Locale des Benutzers aus navigator.language, um Datumsangaben entsprechend den Erwartungen jedes Benutzers anzuzeigen. Verwenden Sie Formatierer-Instanzen wieder, wenn mehrere Datumsangaben formatiert werden, um eine bessere Performance zu erzielen.