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 formatRange() Methode von Intl.DateTimeFormat Instanzen formatiert einen Datumsbereich in der kürzest möglichen Weise, basierend auf den beim Instanziieren des Intl.DateTimeFormat-Objekts angegebenen Sprach- und Formatierungsoptionen.

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 oder Temporal.PlainDateTime Objekt sein. Darüber hinaus kann es ein Temporal.PlainTime, Temporal.PlainDate, Temporal.PlainYearMonth, oder Temporal.PlainMonthDay Objekt sein, wenn das DateTimeFormat-Objekt so konfiguriert wurde, dass es mindestens einen relevanten Teil des Datums ausgibt.

Hinweis: Ein Temporal.ZonedDateTime Objekt führt immer zu einem TypeError; verwenden Sie stattdessen Temporal.ZonedDateTime.prototype.toLocaleString() oder konvertieren Sie es in ein Temporal.PlainDateTime Objekt.
endDate: Das Ende des Datumsbereichs. Muss denselben Typ wie startDate haben.

Rückgabewert

Ein String, der den angegebenen Datumsbereich formatiert darstellt, entsprechend den Sprach- und Formatierungsoptionen dieses Intl.DateTimeFormat Objekts.

Beispiele

Grundlegende Verwendung von formatRange

Diese Methode empfängt zwei Date Objekte und formatiert den Datumsbereich auf die kürzest mögliche Weise, basierend auf dem locale und den options, die beim Instanziieren 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/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

Siehe auch

Intl.DateTimeFormat