Open In App

JavaScript Intl DateTimeFormat formatRange() Method

Improve
Improve
Like Article
Like
Save
Share
Report

The Intl.DateTimeFormat.prototype.formatRange() method is an inbuilt method in JavaScript that is used to format a date range in the most concise way based on the locale and options provided when instantiating Intl.DateTimeFormat object.

Syntax: 

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

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

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

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

Example 1: In this example, we will format the date ranges in different formats using Intl.DateTimeFormat.prototype.formatRange() method in JavaScript.

javascript




<script>
    const geeks1 = { weekday: 'long', year: 'numeric'
                     month: 'long', day: 'numeric' };
    const geeks2 = { year: '2-digit', month: 'numeric'
                     day: 'numeric' };
      
    const startDate = new Date(Date.UTC(1997, 5, 30, 3, 3, 3));
    const endDate = new Date(Date.UTC(2073, 7, 6, 11, 0, 0));
      
    const dateTime = new Intl.DateTimeFormat('en', geeks1);
    console.log(dateTime.formatRange(startDate, endDate));
      
    const dateTime1 = new Intl.DateTimeFormat('hi', geeks1);
    console.log(dateTime1.formatRange(startDate, endDate));
      
    const dateTime2 = new Intl.DateTimeFormat('en', geeks2);
    console.log(dateTime2.formatRange(startDate, endDate));
      
    const dateTime3 = new Intl.DateTimeFormat('hi', geeks2);
    console.log(dateTime3.formatRange(startDate, endDate));
</script>


Output: 

"Monday, June 30, 1997 – Sunday, August 6, 2073"
"सोमवार, 30 जून 1997 – रविवार, 6 अगस्त 2073"
"6/30/97 – 8/6/73"
"30/6/97 – 6/8/73"

Example 2: In this example, we will format the date ranges in different formats using Intl.DateTimeFormat.prototype.formatRange() method in JavaScript.

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.formatRange() method are listed below: 

  • Google Chrome 76 and above
  • Firefox 91 and above
  • Opera 63 and above
  • Edge 79 and above
  • Safari 14.1 and above


Last Updated : 24 May, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads