Signatur
Beschreibung
Der Konstruktor Intl.DateTimeFormat() erzeugt einen wiederverwendbaren Formatierer für Datums- und Zeitangaben. Er berücksichtigt die Schreibweisen einer Sprache bzw. Region (Reihenfolge von Tag/Monat/Jahr, Monatsnamen, 12- oder 24-Stunden-Format, Kalendersystem, Ziffernsystem) und kann Zeitpunkte in einer beliebigen IANA-Zeitzone ausgeben, zum Beispiel "Europe/Berlin".
Das erzeugte Objekt bietet unter anderem die Methoden format(), formatToParts(), formatRange(), formatRangeToParts() und resolvedOptions(). Wenn du viele Werte mit denselben Einstellungen formatierst (Tabellen, Listen, Diagramm-Achsen), solltest du den Formatierer einmal anlegen und wiederverwenden. Das ist deutlich schneller als wiederholte Aufrufe von Date.prototype.toLocaleDateString(), die intern jedes Mal einen neuen Formatierer erzeugen.
Die Ausgabe steuerst du entweder über die Kurzform-Optionen dateStyle/timeStyle ("full", "long", "medium", "short") oder über einzelne Komponenten wie year, month, day, hour und minute. Die beiden Varianten lassen sich nicht kombinieren. Gibst du keine Komponente an, werden nur year, month und day im numerischen Format ausgegeben.
Den Konstruktor kannst du auch ohne new aufrufen, das Ergebnis ist dasselbe. Ungültige Werte für Locale oder Optionen führen zu einem RangeError.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $locales | string | string[] | Intl.Locale | undefined | undefined (Standard-Locale der Laufzeitumgebung) | BCP-47-Sprach-Tag wie "de-DE" oder eine Liste davon, geordnet nach Priorität. Unicode-Erweiterungen sind möglich, z. B. "de-DE-u-ca-buddhist-nu-arab" für Kalender (ca), Ziffernsystem (nu) und Stundenzyklus (hc). |
| $options | object | {} | Konfigurationsobjekt. Wichtige Schlüssel sind:
|
Rückgabewert
Intl.DateTimeFormat-Objekt mit den Methoden format(), formatToParts(), formatRange(), formatRangeToParts() und resolvedOptions().Beispiele
Datum mit dateStyle und timeStyle formatieren
const datum = new Date(Date.UTC(2024, 2, 15, 14, 30));
const fmt = new Intl.DateTimeFormat('de-DE', {
dateStyle: 'full',
timeStyle: 'short',
timeZone: 'Europe/Berlin'
});
console.log(fmt.format(datum));Formatierer für eine Liste wiederverwenden
const bestellungen = [
{ id: 1, zeit: new Date(Date.UTC(2024, 0, 5, 8, 0)) },
{ id: 2, zeit: new Date(Date.UTC(2024, 0, 6, 17, 45)) }
];
// Formatierer einmal anlegen und für alle Einträge nutzen
const fmt = new Intl.DateTimeFormat('de-DE', {
day: '2-digit',
month: '2-digit',
year: 'numeric',
hour: '2-digit',
minute: '2-digit',
timeZone: 'UTC'
});
for (const b of bestellungen) {
console.log(`#${b.id}: ${fmt.format(b.zeit)}`);
}Derselbe Zeitpunkt in mehreren Zeitzonen
const meeting = new Date(Date.UTC(2024, 5, 1, 15, 0));
const zonen = ['Europe/Berlin', 'America/New_York', 'Asia/Tokyo'];
for (const timeZone of zonen) {
const fmt = new Intl.DateTimeFormat('de-DE', {
hour: '2-digit',
minute: '2-digit',
timeZone,
timeZoneName: 'short'
});
console.log(timeZone.padEnd(18), fmt.format(meeting));
}formatToParts und resolvedOptions
const fmt = new Intl.DateTimeFormat('de-DE', {
weekday: 'short',
day: 'numeric',
month: 'long'
});
const teile = fmt.formatToParts(new Date(2024, 11, 24));
// z. B. den Monat gezielt hervorheben
const html = teile
.map(({ type, value }) => type === 'month' ? `<b>${value}</b>` : value)
.join('');
console.log(html);
const { locale, timeZone, calendar } = fmt.resolvedOptions();
console.log(locale, calendar, typeof timeZone);