JavaScript Intl DateTimeFormat formatRangeToParts() Method

The Intl.DateTimeFormat.prototype.formatRangeToParts() method is an inbuilt method in JavaScript that is used to allow locale-specific tokens representing each part of the formatted date range produced by DateTimeFormat formatters.

Syntax: 

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

Parameters: This method accepts two parameters as mentioned above and described below:  

• startDate: This parameter holds the starting date of a range.
• endDate: This parameter holds the ending date of a range.

The below examples illustrate the Intl.DateTimeFormat.prototype.formatRangeToParts() method in JavaScript:

Example 1:  This example explains the Intl.DateTimeFormat.prototype.formatRangeToParts() method in JavaScript.

<script>
    const startDate = new Date(Date.UTC(1997, 5, 30, 3, 3, 3));
    const endDate = new Date(Date.UTC(2073, 7, 6, 11, 0, 0));
    
    let result = new Intl.DateTimeFormat("hi", {
        hour: 'numeric',
        minute: 'numeric'
    });
    
    console.log(result.formatRange(startDate, endDate));
    let val = result.formatRangeToParts(startDate, endDate);
    console.log(val[0]);
    console.log(val[2]);
    console.log(val[3]);
    console.log(val[8]);
</script>

Output: 

"30/6/1997, 8:33 am – 6/8/2073, 4:30 pm"
Object { type: "day", value: "30", source: "startRange" }
Object { type: "month", value: "6", source: "startRange" }
Object { type: "literal", value: "/", source: "startRange" }
Object { type: "minute", value: "33", source: "startRange" }

Example 2: This example explains the Intl.DateTimeFormat.prototype.formatRangeToParts() method in JavaScript.

<script>
    let geek1 = new Date(Date.UTC(1997, 5, 30, 10, 0, 0));
    let geek2 = new Date(Date.UTC(2020, 2, 26, 11, 0, 0));
    let geek3 = new Date(Date.UTC(2073, 6, 23, 10, 0, 0));
    
    let result1 = new Intl.DateTimeFormat("en", {
        year: '2-digit',
        month: 'numeric',
        day: 'numeric',
        hour: 'numeric',
        minute: 'numeric'
    });
    console.log(result1.format(geek1));
    console.log(result1.formatRange(geek1, geek2));
    console.log(result1.formatRange(geek1, geek3));
    
    let result2 = new Intl.DateTimeFormat("hi", {
        year: 'numeric',
        month: 'short',
        day: 'numeric'
    });
    console.log(result2.format(geek1));
    console.log(result2.formatRange(geek1, geek2));
    console.log(result2.formatRange(geek1, geek3));
</script>

Output: 

"6/30/97, 3:30 PM"
"6/30/97, 3:30 PM – 3/26/20, 4:30 PM"
"6/30/97, 3:30 PM – 7/23/73, 3:30 PM"
"30 जून 1997"
"30 जून 1997 – 26 मार्च 2020"
"30 जून 1997 – 23 जुल॰ 2073"

We have a complete list of Javascript Intl methods, to check those please go through the Javascript Intl Complete Reference article.

Supported Browsers: The browsers supported by Intl.DateTimeFormat.prototype.formatRangeToParts() method are listed below: 

• Google Chrome 76 and above
• WebView Android 76 and above
• Chrome Android 76 and above
• Opera Android 54 and above
• Edge 79 and above
• Firefox 91 and above