The Intl.DateTimeFormat.prototype.formatRangeToParts() method allows locale-specific tokens representing each part of the formatted date range produced by DateTimeFormat formatters.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Syntax
Intl.DateTimeFormat.prototype.formatRangeToParts(startDate, endDate)
Examples
Basic formatRangeToParts usage
This method receives two Dates and returns an Array of objects containing the locale-specific tokens representing each part of the formatted date range.
let date1 = new Date(Date.UTC(2007, 0, 10, 10, 0, 0));
let date2 = new Date(Date.UTC(2007, 0, 10, 11, 0, 0));
// > 'Wed, 10 Jan 2007 10:00:00 GMT'
// > 'Wed, 10 Jan 2007 11:00:00 GMT'
let fmt = new Intl.DateTimeFormat("en", {
hour: 'numeric',
minute: 'numeric'
});
console.log(fmt.formatRange(date1, date2));
// > '10:00 – 11:00 AM'
fmt.formatRangeToParts(date1, date2);
// return value:
// [
// { type: 'hour', value: '10', source: "startRange" },
// { type: 'literal', value: ':', source: "startRange" },
// { type: 'minute', value: '00', source: "startRange" },
// { type: 'literal', value: ' – ', source: "shared" },
// { type: 'hour', value: '11', source: "endRange" },
// { type: 'literal', value: ':', source: "endRange" },
// { type: 'minute', value: '00', source: "endRange" },
// { type: 'literal', value: ' ', source: "shared" },
// { type: 'dayPeriod', value: 'AM', source: "shared" }
// ]
Specifications
| Specification |
|---|
| Intl.DateTimeFormat.formatRange The definition of 'formatRangeToParts()' in that specification. |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
| Desktop | Mobile | Server | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
formatRangeToParts | Chrome Full support 76 | Edge No support No | Firefox No support No | IE No support No | Opera No support No | Safari No support No | WebView Android Full support 76 | Chrome Android Full support 76 | Firefox Android No support No | Opera Android Full support 54 | Safari iOS No support No | Samsung Internet Android No support No | nodejs
Full support
12.9.0
|
Legend
- Full support
- Full support
- No support
- No support
- See implementation notes.
- See implementation notes.
