Intl.DateTimeFormat dates

by ecmanaut

CSS

.token {
  display: inline-block;
  background: rgb(225, 236, 250);
  border: 0 solid rgb(225, 236, 250);
  border-radius: 3px;
}

JavaScript

function datetime(locale = 'en-us', date = new Date()) {
  const formatter = new Intl.DateTimeFormat(locale, {
    year: 'numeric',
    month: 'numeric',
    day: 'numeric',
    hour: 'numeric',
    minute: 'numeric',
    second: 'numeric'
  });
  const p = formatter.formatToParts(date);
  return p.map(({type, value})=>`<span class="${type === 'literal' ? 'literal' : 'token'}">${value}</span>`).join('');
}

document.body.innerHTML = ['sv-se', 'ja-jp', 'en-us', 'en-ca', 'fr-fr'].map(
  l => `<tt>${l}: ${datetime(l)}</tt>`
).join('<br />');