JavaScript Intl DateTimeFormat formatRange() Method

by

JavaScript Intl DateTimeFormat formatRange() method is “used to format a date range in the most concise way based on the locale and options provided when instantiating Intl.DateTimeFormat object”. This method is useful for presenting intervals, durations, or time spans in a way that suits the preferred locale and formatting options.

Syntax

Intl.DateTimeFormat.prototype.formatRange(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 a formatted string presenting the specified date or time range based on the provided locale and options.

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

let options = { weekday: 'long', year: 'numeric', 
 month: 'long', day: 'numeric' };

let startDate = new Date(Date.UTC(2014, 5, 19, 0, 0, 0));
let endDate = new Date(Date.UTC(2020, 3, 10, 0, 0, 0));
 
let dateTimeEn = new Intl.DateTimeFormat('en', options)
                         .formatRange(startDate, endDate);
let dateTimeHi = new Intl.DateTimeFormat('hi', options)
                         .formatRange(startDate, endDate);
let dateTimeFr = new Intl.DateTimeFormat('fr', options)
                         .formatRange(startDate, endDate);
 
console.log(dateTimeEn);
console.log(dateTimeHi);
console.log(dateTimeFr);

Output

Thursday, June 19, 2014 – Friday, April 10, 2020
गुरुवार, 19 जून 2014 – शुक्रवार, 10 अप्रैल 2020
jeudi 19 juin 2014 – vendredi 10 avril 2020

Example 2: Using different formats

let options = new Intl.DateTimeFormat('en',{year: '2-digit', 
 month: 'numeric', day: 'numeric',hour: 'numeric',
 minute: 'numeric' });

let options2 = new Intl.DateTimeFormat('en',{year: 'numeric', month: 'short',day: 'numeric'});
let options3 = new Intl.DateTimeFormat('hi',{year: 'numeric', month: 'short',day: '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));
let date3 = new Date(Date.UTC(2021, 3, 10, 11, 0, 0));

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

console.log(options2.format(date1));
console.log(options2.formatRange(date1, date2));
console.log(options2.formatRange(date2, date3));
console.log(options2.formatRange(date1, date3));

console.log(options3.format(date1));
console.log(options3.formatRange(date1, date2));
console.log(options3.formatRange(date2, date3));
console.log(options3.formatRange(date1, date3));

Output

6/19/14, 12:30 PM
6/19/14, 12:30 PM – 4/10/20, 2:30 PM
4/10/20, 2:30 PM – 4/10/21, 4:30 PM
6/19/14, 12:30 PM – 4/10/21, 4:30 PM
Jun 19, 2014
Jun 19, 2014 – Apr 10, 2020
Apr 10, 2020 – Apr 10, 2021
Jun 19, 2014 – Apr 10, 2021
19 जून 2014
19 जून 2014 – 10 अप्रैल 2020
10 अप्रैल 2020 – 10 अप्रैल 2021
19 जून 2014 – 10 अप्रैल 2021

Browser Compatibility

Chrome Edge Firefox Safari Opera IE
Yes Yes Yes Yes Yes Yes

That’s it!

Related posts

JavaScript Intl.DateTimeFormat.format() Method

JavaScript Int.DateTimeFormat() constructor

Leave a Comment