Intl.DurationFormat is now Baseline Newly available

bookmark_border Stay organized with collections Save and categorize content based on your preferences.

Jeremy Wagner

Published: Mar 20, 2025

A common bit of information you might see on a web page is a piece of text that says how long until a certain event, or how long time has elapsed since an event has occurred. This is usually represented as a string that communicates the time duration in hours, minutes, seconds, or other useful units of time.

Intl.DurationFormat is a useful feature that does this for you in the browser while accounting for any internationalization needs you might have, without the need for additional JavaScript. As of March, 2025, it has become Baseline Newly available.

How Intl.DurationFormat works

Intl.DurationFormat is a class that, when instantiated, returns a string describing the duration of time. It works by specifying an object containing keys and values that correspond to the units of time you want a string generated for:

// Specify the duration:
const duration = {
  years: 1,
  hours: 20,
  minutes: 15,
  seconds: 35
};

// Output: '1 yr, 20 hr, 15 min, 35 sec'
new Intl.DurationFormat('en').format(duration);

To return a string in a long format, pass a value of 'long' to the style option in the constructor's second argument:

const duration = {
  years: 1,
  hours: 20,
  minutes: 15,
  seconds: 35
};

// Output: '1 year, 20 hours, 15 minutes, 35 seconds'
new Intl.DurationFormat('en', { style: 'long' }).format(duration);

So far, these examples generate strings in English. Given that this is an internationalization feature, the real usefulness of it is that you can pass in any valid locale and get strings formatted in whatever supported language you need:

const duration = {
  years: 1,
  hours: 20,
  minutes: 15,
  seconds: 35
};

// Output: '1 Jahr, 20 Stunden, 15 Minuten und 35 Sekunden'
new Intl.DurationFormat('de', { style: 'long' }).format(duration);

// Output: '1 año, 20 horas, 15 minutos y 35 segundos'
new Intl.DurationFormat('es', { style: 'long' }).format(duration);

// Output: '1年20小时15分钟35秒钟'
new Intl.DurationFormat('zh', { style: 'long' }).format(duration);

// Output: '1 år, 20 timer, 15 minutter og 35 sekunder'
new Intl.DurationFormat('no', { style: 'long' }).format(duration);

// Output: 'mwaka 1, saa 20, dakika 15 na sekunde 35'
new Intl.DurationFormat('sw', { style: 'long' }).format(duration);

These examples only poke at what you can do with this new feature. For a deeper dive into what it's capable of, read the Intl.DurationFormat documentation on MDN for more information.