 Jeremy Wagner [GitHub](https://github.com/malchata) [LinkedIn](https://www.linkedin.com/in/malchata) [Homepage](https://jlwagner.net/)
Published: Mar 20, 2025
> [!TIP]
> **Celebration:** This web feature is now available in all three major browser engines, and becomes **Baseline Newly available** as of March 4, 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:
```javascript
// 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:
```javascript
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:
```javascript
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](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Intl/DurationFormat/DurationFormat) for more information.