【JavaScript ECMAScript】Intl::Intl.DateTimeFormat.prototype.formatRangeToPartsインスタンスメソッドの使い方

Intl.DateTimeFormat.prototype.formatRangeToParts()メソッドは、2つの日付（開始日と終了日）の期間を、地域や言語に合わせた書式で表現し、その結果を文字列ではなく、構成要素（パーツ）の配列として提供するメソッドです。この処理は、Intl.DateTimeFormatオブジェクトの書式オプションとロケール（地域や言語設定）に基づきます。

具体的には、「2023年1月1日〜1月31日」のように表示される日付範囲を、「2023年」「1月」「1日」「〜」といった個々のパーツに分解して提供します。返される配列の各要素は、日付の年、月、日、または区切り記号などのタイプと値を持つオブジェクトです。

この機能は、Webアプリケーションやシステムで日付表示を細かく制御したい場合に特に役立ちます。日付の各部分に個別のスタイルを適用したり、特定の要素の表示を調整したりと、ユーザーインターフェースで日付範囲を柔軟かつ豊かに表現することが可能になります。これにより、開発者は国際的な日付範囲の表示を、より直感的でユーザーフレンドリーな形で提供できるようになります。

Copy
1const dateTimeFormat = new Intl.DateTimeFormat('en-US', {
2  year: 'numeric',
3  month: 'short',
4  day: 'numeric',
5});
6
7const startDate = new Date('2023-01-01T00:00:00Z');
8const endDate = new Date('2023-01-07T23:59:59Z');
9
10dateTimeFormat.formatRangeToParts(startDate, endDate);

startDate, endDate

• startDate: Date | { year: number, month: number, day: number, ... }: フォーマットの開始日を指定するDateオブジェクトまたは、年、月、日などのプロパティを持つオブジェクト
• endDate: Date | { year: number, month: number, day: number, ... }: フォーマットの終了日を指定するDateオブジェクトまたは、年、月、日などのプロパティを持つオブジェクト

Array

Intl.DateTimeFormat.prototype.formatRangeToParts() メソッドは、指定された日付範囲を、ローカライズされた日付フォーマットの各部分（年、月、日、時、分など）に分解したオブジェクトの配列を返します。