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⁩.

DasIntl.DateTimeFormat Objekt ermöglicht sprachsensitive Datums- und Zeitformatierung.

Probieren Sie es aus

const date = new Date(Date.UTC(2020, 11, 20, 3, 23, 16, 738));// Results below assume UTC timezone - your results may vary// Specify default date formatting for language (locale)console.log(new Intl.DateTimeFormat("en-US").format(date));// Expected output: "12/20/2020"// Specify default date formatting for language with a fallback language (in this case Indonesian)console.log(new Intl.DateTimeFormat(["ban", "id"]).format(date));// Expected output: "20/12/2020"// Specify date and time format using "style" options (i.e. full, long, medium, short)console.log(  new Intl.DateTimeFormat("en-GB", {    dateStyle: "full",    timeStyle: "long",    timeZone: "Australia/Sydney",  }).format(date),);// Expected output: "Sunday, 20 December 2020 at 14:23:16 GMT+11"

Konstruktor

Intl.DateTimeFormat(): Erstellt ein neuesIntl.DateTimeFormat Objekt.

Statische Methoden

Intl.DateTimeFormat.supportedLocalesOf(): Gibt ein Array zurück, das die der bereitgestellten lokalen Einstellungen enthält, die unterstützt werden, ohne auf die Standard-Locale der Laufzeitumgebung zurückzufallen.

Instanz-Eigenschaften

Diese Eigenschaften sind aufIntl.DateTimeFormat.prototype definiert und werden von allenIntl.DateTimeFormat Instanzen geteilt.

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

Instanz-Methoden

Intl.DateTimeFormat.prototype.format(): Getter-Funktion, die ein Datum gemäß den Locale- und Formatierungsoptionen diesesDateTimeFormat Objekts formatiert.
Intl.DateTimeFormat.prototype.formatRange(): Diese Methode erhält zweiDatum Objekte und formatiert die Datumsspanne auf die prägnanteste Weise basierend auf den Locale- und Optionsvorgaben, die bei der Instanziierung vonDateTimeFormat bereitgestellt wurden.
Intl.DateTimeFormat.prototype.formatRangeToParts(): Diese Methode erhält zweiDatum Objekte und gibt ein Array von Objekten zurück, die die landesspezifischen Tokens enthalten, die jeden Teil der formatierten Datumsspanne darstellen.
Intl.DateTimeFormat.prototype.formatToParts(): Gibt einArray von Objekten zurück, die den Datumstring in Teile zerlegen, die für eine benutzerdefinierte, locale-bewusste Formatierung verwendet werden können.
Intl.DateTimeFormat.prototype.resolvedOptions(): Gibt ein neues Objekt mit Eigenschaften zurück, die die Locale- und Formatierungsoptionen widerspiegeln, die während der Initialisierung des Objekts berechnet wurden.

Beispiele

Verwendung von DateTimeFormat

Bei grundlegender Nutzung ohne Angabe einer Locale verwendetDateTimeFormat die Standard-Locale und 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 zoneconsole.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 Unterschiede 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 Argumentlocales 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 orderconsole.log(new Intl.DateTimeFormat("en-US").format(date));// "12/19/2012"// British English uses day-month-year orderconsole.log(new Intl.DateTimeFormat("en-GB").format(date));// "19/12/2012"// Korean uses year-month-day orderconsole.log(new Intl.DateTimeFormat("ko-KR").format(date));// "2012. 12. 19."// Arabic in most Arabic speaking countries uses real Arabic digitsconsole.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 eraconsole.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 Indonesianconsole.log(new Intl.DateTimeFormat(["ban", "id"]).format(date));// "19/12/2012"

Verwendung von Optionen

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

const date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0, 200));// request a weekday along with a long datelet 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 visibleoptions.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 preciseoptions = {  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 preciseoptions.fractionalSecondDigits = 3; // number digits for fraction-of-secondsconsole.log(new Intl.DateTimeFormat("en-AU", options).format(date));// "2:00:00.200 pm AEDT"// sometimes even the US needs 24-hour timeoptions = {  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 undefinedconsole.log(new Intl.DateTimeFormat(undefined, options).format(date));// "12/19/2012, 19:00:00"// sometimes it's helpful to include the period of the dayoptions = { hour: "numeric", dayPeriod: "short" };console.log(new Intl.DateTimeFormat("en-US", options).format(date));// 10 at night

Die verwendeten Kalender- und Zahlenformate können ebenfalls unabhängig überoptions-Argumente 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)