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 September 2017.

Die formatRange()-Methode von Intl.DateTimeFormat-Instanzen formatiert einen Datumsbereich auf die prägnanteste Weise, basierend auf den beim Instanziieren dieses Intl.DateTimeFormat-Objekts angegebenen Locales und Optionen.

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

js
formatRange(startDate, endDate)

Parameter

startDate

Der Beginn des Datumsbereichs. Kann ein Date- oder ein Temporal.PlainDateTime-Objekt sein. Zusätzlich kann es ein Temporal.PlainTime, Temporal.PlainDate, Temporal.PlainYearMonth oder Temporal.PlainMonthDay-Objekt sein, wenn das DateTimeFormat-Objekt so konfiguriert wurde, dass mindestens ein relevanter Teil des Datums ausgegeben wird.

Hinweis: Ein Temporal.ZonedDateTime-Objekt führt immer zu einem TypeError; nutzen Sie stattdessen Temporal.ZonedDateTime.prototype.toLocaleString() oder konvertieren Sie es in ein Temporal.PlainDateTime-Objekt.

endDate

Das Ende des Datumsbereichs. Muss den gleichen Typ wie startDate haben.

Rückgabewert

Ein String, der den gegebenen Datumsbereich formatiert darstellt, entsprechend den locale-Einstellungen und Formatierungsoptionen dieses Intl.DateTimeFormat-Objekts.

Beispiele

Grundlegende Verwendung von formatRange

Diese Methode empfängt zwei Date-Objekte und formatiert den Datumsbereich auf die prägnanteste Weise, basierend auf den beim Instanziieren von Intl.DateTimeFormat angegebenen locale- und options.

js
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® 2025 Internationalization API Specification
# sec-intl.datetimeformat.prototype.formatRange

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Node.js
formatRange

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

Siehe auch