JavaScript | Método Intl.DateTimeFormat.prototype.formatRangeToParts()

El método Intl.DateTimeFormat.prototype.formatRangeToParts() es un método incorporado en JavaScript que se utiliza para permitir tokens específicos de la configuración regional que representan cada parte del rango de fechas con formato producido por los formateadores de DateTimeFormat.

Sintaxis: 

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

Parámetros: este método acepta dos parámetros, como se mencionó anteriormente y se describe a continuación:  

• startDate: este parámetro contiene la fecha de inicio del rango.
• endDate: este parámetro contiene la fecha de finalización del rango.

Los siguientes ejemplos ilustran el método Intl.DateTimeFormat.prototype.formatRangeToParts() en JavaScript:

Ejemplo 1:  

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]);

Producción: 

"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" }

Ejemplo 2: 

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));

Producción: 

"month" "6" "startRange"
"literal" "/" "startRange"
"day" "30" "startRange"
"literal" "/" "startRange"
"year" "1997" "startRange"
"literal" ", " "startRange"
"hour" "8" "startRange"
"literal" ":" "startRange"
"minute" "33" "startRange"
"literal" " " "startRange"
"dayPeriod" "AM" "startRange"
"literal" " – " "shared"
"month" "8" "endRange"
"literal" "/" "endRange"
"day" "6" "endRange"
"literal" "/" "endRange"
"year" "2073" "endRange"
"literal" ", " "endRange"
"hour" "4" "endRange"
"literal" ":" "endRange"
"minute" "30" "endRange"
"literal" " " "endRange"
"dayPeriod" "PM" "endRange"

Navegadores compatibles: los navegadores compatibles con el método Intl.DateTimeFormat.prototype.formatRangeToParts() se enumeran a continuación: 

• Google Chrome 76 y superior
• WebView Android 76 y superior
• Chrome Android 76 y superior
• Opera Android 54 y superior
• Edge 79 y superior
• Firefox 91 y superior