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 September 2017.
Intl.DateTimeFormat.prototype.formatRange() は、 Intl.DateTimeFormat オブジェクトがインスタンス化されたときに提供された locale と options に基づいて、もっとも簡明な方法で日付の範囲を書式化します。
試してみましょう
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" 構文
js
formatRange(startDate, endDate); 例
基本的な formatRange の使用
このメソッドは 2 つの Date を受け取り、 Intl.DateTimeFormat オブジェクトがインスタンス化されたときに提供された locale と options に基づいて日付の範囲を書式化します。
js
let date1 = new Date(Date.UTC(2007, 0, 10, 10, 0, 0)); let date2 = new Date(Date.UTC(2007, 0, 10, 11, 0, 0)); let date3 = new Date(Date.UTC(2007, 0, 20, 10, 0, 0)); // > 'Wed, 10 Jan 2007 10:00:00 GMT' // > 'Wed, 10 Jan 2007 11:00:00 GMT' // > 'Sat, 20 Jan 2007 10:00:00 GMT' let fmt1 = new Intl.DateTimeFormat("en", { year: "2-digit", month: "numeric", day: "numeric", hour: "numeric", minute: "numeric", }); console.log(fmt1.format(date1)); console.log(fmt1.formatRange(date1, date2)); console.log(fmt1.formatRange(date1, date3)); // > '1/10/07, 10:00 AM' // > '1/10/07, 10:00 – 11:00 AM' // > '1/10/07, 10:00 AM – 1/20/07, 10:00 AM' let fmt2 = new Intl.DateTimeFormat("en", { year: "numeric", month: "short", day: "numeric", }); console.log(fmt2.format(date1)); console.log(fmt2.formatRange(date1, date2)); console.log(fmt2.formatRange(date1, date3)); // > 'Jan 10, 2007' // > 'Jan 10, 2007' // > 'Jan 10 – 20, 2007' 仕様書
| Specification |
|---|
| ECMAScript® 2026 Internationalization API Specification # sec-intl.datetimeformat.prototype.formatRange |
