tc39 / proposal-intl-formattoparts

Intl 402 spec proposal for {DateTimeFormat,Number}.prototype.formatToParts

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

• tc39/ecma402#30

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

proposal-intl-formattoparts's Issues

Polyfill for Intl.NumberFormat.prototype.formatToParts

Current polyfill contains only Intl.DateTimeFormat.prototype.formatToParts but not Intl.NumberFormat.prototype.formatToParts

"long" returns wrong value

I am trying to build the "long" of either "month" or "weekday". However I am getting the wrong values.

const date = Date.now()

// Get part from date format parts.
const get = (key, parts) =>
  parts.find(({ type }) => type === key)

// Date format defaults.
const options = {
  timeZone: "Australia/Sydney",
  weekday: "long",
  year: "numeric",
  month: "numeric",
  day: "numeric",
  hour: "2-digit",
  minute: "2-digit",
  hour12: true
}

const parts = new Intl.DateTimeFormat("en", options)
  .formatToParts(date)

// A full textual representation of the day of the week eg: Tuesday.
const value = get("weekday", parts).value

// Expect: "Monday"
// Result: "Mon"

Publish on npm

Are there any plans to publish polyfill to npm to use it in Edge?

Force sign when formatting numbers

Since NumberFormat.formatToParts already defines a plusSign type, it would be handy to be able to force the inclusion of the sign when formatting numbers.

See ICU sign-always Number Skeletons.

Why are negative years botched like that?

if (p === 'year' && v <= 0)
  v = 1 - v;

Why?