Dublin Library

The Publishing Project

Relative Time in JavaScript

  • 2 min. read

 

I wasn't aware that there is a completely separate standard for ECMAScript internationalization (ECMA-402 or the ECMAScript 2019 Internationalization API) that goes beyond the core specification and covers internationalization in a lot more detail than the main specification can.

I came across this spec through a post from Mathias Bynens about a new internationalization API available in Chrome 71. The API makes creating relative time strings like '1 week ago' or 'in 2 weeks' easier and faster since it's a part of the proposed internationalization spec.

I've used moment.js but it's a beast in terms of file size (16.4K for the basic package and 66.4K for the full package including locales) and most of the time you will only use a fraction of the locales provided.

The relative time API, as implemented in Chrome,

const rtf = new Intl.RelativeTimeFormat('en', {
  localeMatcher: 'best fit',
  style: 'long',
  numeric: 'auto',
});

And then use it like this:

rtf.format(3.14, 'second'); // → 'in 3.14 seconds'

rtf.format(-15, 'minute'); // → '15 minutes ago'

rtf.format(8, 'hour'); // → 'in 8 hours'

rtf.format(-2, 'day'); // → '2 days ago'

You can use positive and negative values to indicate time in the future or the past.

This is an interesting API. It provides a smaller, built-in, API to work with relative timings on your page.

Edit on Github