Intl.DateTimeFormat.prototype.formatRange()
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since August 2021.
Die Methode formatRange() von Intl.DateTimeFormat Instanzen formatiert einen Datumsbereich auf die prägnanteste Weise basierend auf den lokalen Einstellungen und Optionen, die beim Instanziieren dieses Intl.DateTimeFormat Objekts bereitgestellt 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
DateoderTemporal.PlainDateTimeObjekt sein. Zusätzlich kann es einTemporal.PlainTime,Temporal.PlainDate,Temporal.PlainYearMonth, oderTemporal.PlainMonthDayObjekt sein, wenn dasDateTimeFormatObjekt so konfiguriert wurde, dass es mindestens einen relevanten Teil des Datums enthält.Hinweis: Ein
Temporal.ZonedDateTimeObjekt wird immer einenTypeErrorauslösen; verwenden Sie stattdessenTemporal.ZonedDateTime.prototype.toLocaleString()oder konvertieren Sie es in einTemporal.PlainDateTimeObjekt. endDate-
Das Ende des Datumsbereichs. Muss denselben Typ wie
startDatehaben.
Rückgabewert
Ein String, der den angegebenen Datumsbereich entsprechend den lokalen Einstellungen und Formatierungsoptionen dieses Intl.DateTimeFormat Objekts formatiert darstellt. Wenn die Start- und Enddaten bei der Präzision der Ausgabe äquivalent sind, enthält die Ausgabe nur ein einziges Datum.
Beispiele
Grundlegende Verwendung von formatRange
Diese Methode erhält zwei Date Objekte und formatiert den Datumsbereich auf die prägnanteste Weise basierend auf den locale und options, die bei der Instanziierung von Intl.DateTimeFormat bereitgestellt 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/07, 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
| Specification |
|---|
| ECMAScript® 2026 Internationalization API Specification # sec-intl.datetimeformat.prototype.formatRange |
Browser-Kompatibilität
Loading…