Intl 402 spec proposal for {DateTimeFormat,Number}.prototype.formatToParts
Switch branches/tags
Nothing to show
Clone or download
Latest commit 20941bd Dec 12, 2017
Permalink
Failed to load latest commit information.
locale-data/json Initial Nov 30, 2015
README.md Update to Stage 4 Dec 12, 2017
polyfill.js Initial Nov 30, 2015
test.js update test Nov 30, 2015

README.md

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 value = -1000;

let numStr = numFormatter.formatToParts(-1000).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(value)); // yields "-€1,000.00"
console.log(numStr); // yields "-<b>€</b><i>1,000.00</i>"