Intl.DateTimeFormat

BaselineWidely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2017.

Intl.DateTimeFormat オブジェクトは、言語に応じた日付と時刻の書式化を可能にします。

試してみましょう

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"

コンストラクター

Intl.DateTimeFormat(): 新しいDateTimeFormat オブジェクトを生成します。

静的メソッド

Intl.DateTimeFormat.supportedLocalesOf(): 指定されたロケールのうち、実行時の既定のロケールにフォールバックせずに対応されるものを配列に収めて返します。

インスタンスメソッド

Intl.DateTimeFormat.prototype.format(): ロケールおよびこのDateTimeFormat オブジェクトの書式化オプションに則って日付を書式化するゲッター関数です。
Intl.DateTimeFormat.prototype.formatToParts(): オブジェクトのArray を返し、これは専用のロケールを意識した書式で使用することができる部品内の数値文字列を表します。
Intl.DateTimeFormat.prototype.resolvedOptions(): ロケールを反映しているプロパティとオブジェクトの初期化中に計算された照合オプションをもった新しいオブジェクトを返します。
Intl.DateTimeFormat.prototype.formatRange(): このメソッドは 2 つのDate を受け取り、DateTimeFormat インスタンスを生成する際に指定されたロケールとオプションに基づいて、最も簡潔な方法で日付の範囲を書式化します。
Intl.DateTimeFormat.prototype.formatRangeToParts(): このメソッドは 2 つのDate を受け取り、書式化された日付の範囲の各部分を表すロケール固有のトークンを含むオブジェクトの配列を返します。

例

DateTimeFormat の使用

基本的に、ロケールを指定せずに使用すると、DateTimeFormat は既定のロケールとオプションを使用します。

var 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)

locales の使用

この例では、ローカライズされた日付と時刻の形式のバリエーションの一部示しています。アプリケーションのユーザーインターフェイスで使用される言語のフォーマットを取得するには、locales 引数を使用して、その言語 (およびおそらくいくつかのフォールバック言語) を指定してください。

var 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"

options の使用

日付と時刻の書式はoptions 引数を使用してカスタマイズできます。

var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0, 200));// request a weekday along with a long datevar 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 'default'console.log(new Intl.DateTimeFormat("default", 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

The used calendar and numbering formats can also be set independently viaoptions arguments:

var options = { calendar: "chinese", numberingSystem: "arab" };var dateFormat = new Intl.DateTimeFormat("default", options);var usedOptions = dateFormat.resolvedOptions();console.log(usedOptions.calendar);// → "chinese"console.log(usedOptions.numberingSystem);// → "arab"console.log(usedOptions.timeZone);// → "America/New_York" (the users default timezone)