The Intl.DateTimeFormat.prototype.formatRange()
formats a date range in the most concise way based on the locale
and options
provided when instantiating Intl.DateTimeFormat
object.
Intl.DateTimeFormat.prototype.formatRange()
Try it
Syntax
formatRange(startDate, endDate)
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
.
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'
Specifications
Specification |
---|
ECMAScript Internationalization API Specification # sec-intl.datetimeformat.prototype.formatRange |
Browser compatibility
Desktop | Mobile | Server | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | Deno | Node.js | |
formatRange |
76
|
79
|
91
|
No
|
63
|
14.1
|
76
|
76
|
91
|
54
|
14.5
|
12.0
|
1.8
|
12.9.0
Before version 13.0.0, only the locale data for
en-US is available by default. See
the DateTimeFormat() constructor for more details.
|
See also
© 2005–2022 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatRange