JavaScript Intl DateTimeFormat formatRangeToParts() Method

by

JavaScript Intl DateTimeFormat formatRangeToParts() Method is used to allow locale-specific tokens representing each part of the formatted date range produced by DateTimeFormat formatters.

In a simple way, this method is used to format date and time ranges into an array of objects, where each object represents a specific part of the formatted range. 

Syntax

Intl.DateTimeFormat.prototype.formatRangeToParts(startDate, endDate)

Parameters

startDate: This parameter represents the start of the date range.

endDate: This parameter represents the end of the date range.

Return Value

It returns an array of objects containing the locale-specific tokens.

Example 1: How to Use Intl DateTimeFormat formatRangeToParts() Method

let options = new Intl.DateTimeFormat('en', 
{ hour: 'numeric', minute: 'numeric' });

let date1 = new Date(Date.UTC(2014, 5, 19, 7, 0, 0));
let date2 = new Date(Date.UTC(2020, 3, 10, 9, 0, 0));

console.log(options.formatRange(date1, date2));

let rangeParts = options.formatRangeToParts(date1, date2);

for (let rangePart of rangeParts) {
 console.log(rangePart);
}

Output

6/19/2014, 12:30 PM – 4/10/2020, 2:30 PM
{ type: 'month', value: '6', source: 'startRange' }
{ type: 'literal', value: '/', source: 'startRange' }
{ type: 'day', value: '19', source: 'startRange' }
{ type: 'literal', value: '/', source: 'startRange' }
{ type: 'year', value: '2014', source: 'startRange' }
{ type: 'literal', value: ', ', source: 'startRange' }
{ type: 'hour', value: '12', source: 'startRange' }
{ type: 'literal', value: ':', source: 'startRange' }
{ type: 'minute', value: '30', source: 'startRange' }
{ type: 'literal', value: ' ', source: 'startRange' }
{ type: 'dayPeriod', value: 'PM', source: 'startRange' }
{ type: 'literal', value: ' – ', source: 'shared' }
{ type: 'month', value: '4', source: 'endRange' }
{ type: 'literal', value: '/', source: 'endRange' }
{ type: 'day', value: '10', source: 'endRange' }
{ type: 'literal', value: '/', source: 'endRange' }
{ type: 'year', value: '2020', source: 'endRange' }
{ type: 'literal', value: ', ', source: 'endRange' }
{ type: 'hour', value: '2', source: 'endRange' }
{ type: 'literal', value: ':', source: 'endRange' }
{ type: 'minute', value: '30', source: 'endRange' }
{ type: 'literal', value: ' ', source: 'endRange' }
{ type: 'dayPeriod', value: 'PM', source: 'endRange' }

Example 2: Customized Time Range Format

let options = new Intl.DateTimeFormat('en', {
 weekday: 'short', year: 'numeric',
 month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric'
});

let date1 = new Date(Date.UTC(2014, 5, 19, 7, 0, 0));
let date2 = new Date(Date.UTC(2020, 3, 10, 9, 0, 0));

console.log(options.formatRange(date1, date2));

let formattedRangeParts = options.formatRangeToParts(date1, date2);

formattedRangeParts.forEach(part => {
 console.log(`${part.type}: ${part.value}`);
});

Output

Thu, June 19, 2014 at 12:30 PM – Fri, April 10, 2020 at 2:30 PM
weekday: Thu
literal: , 
month: June
literal: 
day: 19
literal: , 
year: 2014
literal: at 
hour: 12
literal: :
minute: 30
literal:  
dayPeriod: PM
literal:  – 
weekday: Fri
literal: , 
month: April
literal: 
day: 10
literal: , 
year: 2020
literal: at 
hour: 2
literal: :
minute: 30
literal:  
dayPeriod: PM

Browser Compatibility

Chrome Edge Firefox Safari Opera
Yes Yes Yes Yes Yes

That’s it!

Related posts

JavaScript Int.DateTimeFormat() constructor

JavaScript Intl.DateTimeFormat.format() Method

JavaScript Intl DateTimeFormat formatRange() Method

Leave a Comment