Intl.DateTimeFormat

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.

Das Intl.DateTimeFormat-Objekt ermöglicht sprachsensitives Datum- und Zeitformatieren.

Konstruktor

Intl.DateTimeFormat(): Erstellt ein neues Intl.DateTimeFormat-Objekt.

Statische Methoden

Intl.DateTimeFormat.supportedLocalesOf(): Gibt ein Array zurück, das die von den bereitgestellten Gebietsschemas unterstützt enthält, ohne auf das Standardgebietsschema der Laufzeitumgebung zurückgreifen zu müssen.

Instanz-Eigenschaften

Diese Eigenschaften sind auf Intl.DateTimeFormat.prototype definiert und werden von allen Intl.DateTimeFormat-Instanzen geteilt.

Intl.DateTimeFormat.prototype.constructor: Die Konstruktorfunktion, die das Instanzobjekt erstellt hat. Für Intl.DateTimeFormat-Instanzen ist der Anfangswert der Intl.DateTimeFormat Konstruktor.
Intl.DateTimeFormat.prototype[Symbol.toStringTag]: Der Anfangswert der [Symbol.toStringTag] Eigenschaft ist der String "Intl.DateTimeFormat". Diese Eigenschaft wird in Object.prototype.toString() verwendet.

Instanz-Methoden

Intl.DateTimeFormat.prototype.format(): Getter-Funktion, die ein Datum gemäß dem Gebietsschema und den Formatierungsoptionen dieses DateTimeFormat-Objekts formatiert.
Intl.DateTimeFormat.prototype.formatRange(): Diese Methode erhält zwei Dates und formatiert den Datumsbereich auf die prägnanteste Weise basierend auf dem angegebenen Gebietsschema und den Optionen beim Instantiieren von DateTimeFormat.
Intl.DateTimeFormat.prototype.formatRangeToParts(): Diese Methode erhält zwei Dates und gibt ein Array von Objekten zurück, die die gebietsspezifischen Token darstellen, die jeden Teil des formatierten Datumsbereichs repräsentieren.
Intl.DateTimeFormat.prototype.formatToParts(): Gibt ein Array von Objekten zurück, die die Datumszeichenfolge in Teile aufteilen, die für ein benutzerdefiniertes, sprachenspezifisches Formatieren verwendet werden können.
Intl.DateTimeFormat.prototype.resolvedOptions(): Gibt ein neues Objekt mit Eigenschaften zurück, die das Gebietsschema und die Formatierungsoptionen widerspiegeln, die während der Initialisierung des Objekts berechnet wurden.

Beispiele

Verwendung von DateTimeFormat

Bei der grundlegenden Verwendung ohne Angabe eines Gebietsschemas verwendet DateTimeFormat das Standardgebietsschema und die Standardoptionen.

const date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));

// toLocaleString without arguments depends on the implementation,
// the default locale, and the default time zone
console.log(new Intl.DateTimeFormat().format(date));
// "12/19/2012" if run with en-US locale (language) and time zone America/Los_Angeles (UTC-0800)

Dieses Beispiel zeigt einige der Variationen in lokalisierten Datums- und Zeitformaten. Um das Format der Sprache zu erhalten, die in der Benutzeroberfläche Ihrer Anwendung verwendet wird, stellen Sie sicher, dass Sie diese Sprache (und möglicherweise einige Ersatzsprachen) mit dem locales-Argument angeben:

const date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));

// Results below use the time zone of America/Los_Angeles (UTC-0800, Pacific Standard Time)

// US English uses month-day-year order
console.log(new Intl.DateTimeFormat("en-US").format(date));
// "12/19/2012"

// British English uses day-month-year order
console.log(new Intl.DateTimeFormat("en-GB").format(date));
// "19/12/2012"

// Korean uses year-month-day order
console.log(new Intl.DateTimeFormat("ko-KR").format(date));
// "2012. 12. 19."

// Arabic in most Arabic speaking countries uses real Arabic digits
console.log(new Intl.DateTimeFormat("ar-EG").format(date));
// "١٩‏/١٢‏/٢٠١٢"

// for Japanese, applications may want to use the Japanese calendar,
// where 2012 was the year 24 of the Heisei era
console.log(new Intl.DateTimeFormat("ja-JP-u-ca-japanese").format(date));
// "24/12/19"

// when requesting a language that may not be supported, such as
// Balinese, include a fallback language, in this case Indonesian
console.log(new Intl.DateTimeFormat(["ban", "id"]).format(date));
// "19/12/2012"

Verwendung von Optionen

Die Datums- und Zeitformate können mit dem Argument options angepasst werden:

const date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0, 200));

// request a weekday along with a long date
let options = {
  weekday: "long",
  year: "numeric",
  month: "long",
  day: "numeric",
};
console.log(new Intl.DateTimeFormat("de-DE", options).format(date));
// "Donnerstag, 20. Dezember 2012"

// an application may want to use UTC and make that visible
options.timeZone = "UTC";
options.timeZoneName = "short";
console.log(new Intl.DateTimeFormat("en-US", options).format(date));
// "Thursday, December 20, 2012, GMT"

// sometimes you want to be more precise
options = {
  hour: "numeric",
  minute: "numeric",
  second: "numeric",
  timeZone: "Australia/Sydney",
  timeZoneName: "short",
};
console.log(new Intl.DateTimeFormat("en-AU", options).format(date));
// "2:00:00 pm AEDT"

// sometimes you want to be very precise
options.fractionalSecondDigits = 3; //number digits for fraction-of-seconds
console.log(new Intl.DateTimeFormat("en-AU", options).format(date));
// "2:00:00.200 pm AEDT"

// sometimes even the US needs 24-hour time
options = {
  year: "numeric",
  month: "numeric",
  day: "numeric",
  hour: "numeric",
  minute: "numeric",
  second: "numeric",
  hour12: false,
  timeZone: "America/Los_Angeles",
};
console.log(new Intl.DateTimeFormat("en-US", options).format(date));
// "12/19/2012, 19:00:00"

// to specify options but use the browser's default locale, use undefined
console.log(new Intl.DateTimeFormat(undefined, options).format(date));
// "12/19/2012, 19:00:00"

// sometimes it's helpful to include the period of the day
options = { hour: "numeric", dayPeriod: "short" };
console.log(new Intl.DateTimeFormat("en-US", options).format(date));
// 10 at night

Die verwendeten Kalender- und Zahlenformate können auch unabhängig über das Argument options festgelegt werden:

const options = { calendar: "chinese", numberingSystem: "arab" };
const dateFormat = new Intl.DateTimeFormat(undefined, options);
const usedOptions = dateFormat.resolvedOptions();

console.log(usedOptions.calendar);
// "chinese"

console.log(usedOptions.numberingSystem);
// "arab"

console.log(usedOptions.timeZone);
// "America/New_York" (the users default timezone)

Spezifikationen

Specification
ECMAScript Internationalization API Specification # datetimeformat-objects

Browser-Kompatibilität

BCD tables only load in the browser