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.
The formatRange()
method of Intl.DateTimeFormat
instances formats a
date range in the most concise way based on the locales and
options provided when instantiating this
Intl.DateTimeFormat
object.
Try it
Syntax
js
formatRange(startDate, endDate)
Parameters
Return value
A string representing the given date range formatted according to the locale and formatting options of this Intl.DateTimeFormat
object.
Examples
Basic formatRange usage
This method receives two Date
s and formats the date range in the most
concise way based on the locale
and options
provided when
instantiating Intl.DateTimeFormat
.
js
const date1 = new Date(Date.UTC(1906, 0, 10, 10, 0, 0)); // Wed, 10 Jan 1906 10:00:00 GMT
const date2 = new Date(Date.UTC(1906, 0, 10, 11, 0, 0)); // Wed, 10 Jan 1906 11:00:00 GMT
const date3 = new Date(Date.UTC(1906, 0, 20, 10, 0, 0)); // Sat, 20 Jan 1906 10:00:00 GMT
const fmt1 = new Intl.DateTimeFormat("en", {
year: "2-digit",
month: "numeric",
day: "numeric",
hour: "numeric",
minute: "numeric",
});
console.log(fmt1.format(date1)); // '1/10/06, 10:00 AM'
console.log(fmt1.formatRange(date1, date2)); // '1/10/06, 10:00 – 11:00 AM'
console.log(fmt1.formatRange(date1, date3)); // '1/10/06, 10:00 AM – 1/20/07, 10:00 AM'
const fmt2 = new Intl.DateTimeFormat("en", {
year: "numeric",
month: "short",
day: "numeric",
});
console.log(fmt2.format(date1)); // 'Jan 10, 1906'
console.log(fmt2.formatRange(date1, date2)); // 'Jan 10, 1906'
console.log(fmt2.formatRange(date1, date3)); // 'Jan 10 – 20, 1906'
Specifications
Specification |
---|
ECMAScript Internationalization API Specification # sec-intl.datetimeformat.prototype.formatRange |
Browser compatibility
BCD tables only load in the browser