For AI agents: the complete documentation index is available at /tc39-atlas/en/llms.txt, the full documentation bundle is available at /tc39-atlas/en/llms-full.txt, and this page is available as Markdown at /tc39-atlas/en/proposals/year/2017/intl-datetimeformat-prototype-formattoparts.md.
TC39 Atlas
  • English

      • Intl.DateTimeFormat.prototype.formatToParts S4

      Proposal details
      Proposal overview

      This proposal adds formatToParts methods to Intl.DateTimeFormat and Intl.NumberFormat, allowing developers to access the individual components (such as month, currency, number) of a formatted string for locale-aware customization.

      Note

      The README below comes from the upstream repository and may contain outdated stage or status metadata. Use the proposal details above as the current source of truth.

      DateTimeFormat.prototype.formatToParts / NumberFormat.prototype.formatToParts

      Proposal, specs, tests and reference implementation for DateTimeFormat.prototype.formatToParts and NumberFormat.prototype.formatToParts.

      Status

      Stage 4

      Implementation Progress

      • Polyfill
      • Patch for Gecko

      Backpointers

      Authors

      • Caridy Patiño (@caridy)
      • Eric Ferraiuolo (@ericf)
      • Zibi Braniecki (@zbraniecki)

      Reviewers

      TBD

      Informative

      This proposal enables locale aware formatting of strings produced by Intl formatters.

      Usage

      
let dateFormatter = Intl.DateTimeFormat('en', {
  year: 'numeric',
  month: 'long',
  day: 'numeric'
});
let now = new Date();

let dateStr = dateFormatter.formatToParts(now).map(({type, value}) => {
  switch (type) {
    case 'month': return `<b>${value}</b>`;
    default     : return value;
  }
}).reduce((string, part) => string + part);

console.log(dateFormatter.format(now)); // yields "November 23, 2015"
console.log(dateStr); // yields "<b>November</b> 23, 2015"


let numFormatter = Intl.NumberFormat('en', {
  style: 'currency',
  currency: 'EUR',
});
let amount = -1000;

let numStr = numFormatter.formatToParts(amount).map(({type, value}) => {
  switch (type) {
    case 'currency': return `<b>${value}</b>`;
    case 'number'  : return `<i>${value}</i>`;
    default        : return value;
  }
}).reduce((string, part) => string + part);

console.log(numFormatter.format(amount)); // yields "-€1,000.00"
console.log(numStr); // yields "-<b>€</b><i>1,000.00</i>"