Intl.DateTimeFormat.prototype.formatRange()
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit August 2021 browserübergreifend verfügbar.
Die Methode formatRange() von Intl.DateTimeFormat-Instanzen formatiert einen Datumsbereich möglichst kompakt anhand der Locales und Optionen, die bei der Erstellung dieses Intl.DateTimeFormat-Objekts angegeben wurden.
Probieren Sie es aus
const options1 = {
weekday: "long",
year: "numeric",
month: "long",
day: "numeric",
};
const options2 = { year: "2-digit", month: "numeric", day: "numeric" };
const startDate = new Date(Date.UTC(2007, 0, 10, 10, 0, 0));
const endDate = new Date(Date.UTC(2008, 0, 10, 11, 0, 0));
const dateTimeFormat = new Intl.DateTimeFormat("en", options1);
console.log(dateTimeFormat.formatRange(startDate, endDate));
// Expected output: "Wednesday, January 10, 2007 – Thursday, January 10, 2008"
const dateTimeFormat2 = new Intl.DateTimeFormat("en", options2);
console.log(dateTimeFormat2.formatRange(startDate, endDate));
// Expected output: "1/10/07 – 1/10/08"
Syntax
formatRange(startDate, endDate)
Parameter
startDate-
Der Beginn des Datumsbereichs. Kann ein
Date- oderTemporal.PlainDateTime-Objekt sein. Zusätzlich kann es einTemporal.PlainTime-,Temporal.PlainDate-,Temporal.PlainYearMonth- oderTemporal.PlainMonthDay-Objekt sein, wenn dasDateTimeFormat-Objekt so konfiguriert wurde, dass es mindestens einen relevanten Bestandteil des Datums ausgibt.Hinweis: Ein
Temporal.ZonedDateTime-Objekt löst immer einenTypeErroraus. Verwenden Sie stattdessenTemporal.ZonedDateTime.prototype.toLocaleString()oder konvertieren Sie es in einTemporal.PlainDateTime-Objekt. endDate-
Das Ende des Datumsbereichs. Muss denselben Typ wie
startDatehaben.
Rückgabewert
Ein String, der den angegebenen Datumsbereich entsprechend der Locale und den Formatierungsoptionen dieses Intl.DateTimeFormat-Objekts darstellt. Wenn Anfangs- und Enddatum bei der Genauigkeit der Ausgabe übereinstimmen, enthält die Ausgabe nur ein einzelnes Datum.
Beispiele
Grundlegende Verwendung von formatRange
Diese Methode erhält zwei Date-Objekte und formatiert den Datumsbereich möglichst kompakt anhand der locale und options, die bei der Erstellung von Intl.DateTimeFormat angegeben wurden.
const date1 = new Date(Date.UTC(1906, 0, 10, 10, 0, 0)); // Wed, 10 Jan 1906 10:00:00 GMT
const date2 = new Date(Date.UTC(1906, 0, 10, 11, 0, 0)); // Wed, 10 Jan 1906 11:00:00 GMT
const date3 = new Date(Date.UTC(1906, 0, 20, 10, 0, 0)); // Sat, 20 Jan 1906 10:00:00 GMT
const fmt1 = new Intl.DateTimeFormat("en", {
year: "2-digit",
month: "numeric",
day: "numeric",
hour: "numeric",
minute: "numeric",
});
console.log(fmt1.format(date1)); // '1/10/06, 10:00 AM'
console.log(fmt1.formatRange(date1, date2)); // '1/10/06, 10:00 – 11:00 AM'
console.log(fmt1.formatRange(date1, date3)); // '1/10/06, 10:00 AM – 1/20/06, 10:00 AM'
const fmt2 = new Intl.DateTimeFormat("en", {
year: "numeric",
month: "short",
day: "numeric",
});
console.log(fmt2.format(date1)); // 'Jan 10, 1906'
console.log(fmt2.formatRange(date1, date2)); // 'Jan 10, 1906'
console.log(fmt2.formatRange(date1, date3)); // 'Jan 10 – 20, 1906'
Spezifikationen
| Spezifikation |
|---|
| ECMAScript® 2027 Internationalization API Specification # sec-intl.datetimeformat.prototype.formatRange |