JavaScript Just Got Better at Time: Intl.DurationFormat is Finally Here
If you’ve ever had to format a duration like “1 hour, 45 minutes, and 30 seconds” in JavaScript, you probably ended up writing a custom formatter, importing a heavy date/time library, or dealing with internationalization as an afterthought. Those days are (finally) over.
The new Intl.DurationFormat API is now available in all modern browsers and part of the TC39 Temporal proposal. And I can’t emphasize this enough:
This is the best thing to happen to formatting durations in JS since Intl.DateTimeFormat.
Why It’s a Big Deal
Let’s say you’re building a workout app, a video player, a game, or any UI that deals with time durations (not fixed timestamps). Until now, you had to manually piece together hours, minutes, and seconds — and then localize it yourself (if you even bothered).
Intl.DurationFormat changes that:
- Built-in locale support
- Three formatting styles (long, short, narrow)
- Works with plain objects { hours, minutes, seconds }
- No need for external libraries
Quick Examples
Here’s how dead simple it is to use:
The output adapts naturally to the locale’s formatting conventions — punctuation, word order, conjunctions, even abbreviations.
Styles: long, short, narrow
Depending on your UI context, you can tailor the verbosity:
| Style | Output example |
|---|---|
| long | 1 hour, 46 minutes, and 40 seconds |
| short | 1 hr, 46 min, and 40 sec |
| narrow | 1h 46min 40s |
Perfect for dashboards, mobile UIs, or tooltips where every character counts.
Locale-Aware, Out of the Box
This is a big win for international teams and global products. You can render time in native, readable form without hand-rolling logic per language.
It even handles grammatical rules you probably didn’t know existed.
When You Should Use It
You should start using Intl.DurationFormat right now if:
- You’re formatting durations for timers, media players, or user activity
- Your app supports multiple locales (or should)
- You want to drop moment.js, date-fns, or homegrown formatting utilities
- You care about accessibility and clear UI text
Browser Support
As of March 2025, all evergreen browsers (Chrome 111+, Firefox 121+, Safari 17.4+, Edge 111+) support it. If you’re targeting truly legacy environments, you might still need a polyfill — but for 95% of the web, it’s good to go.
Final Thoughts
It’s easy to sleep on new Intl.* APIs, but this one is a gem. Clean, declarative, locale-aware, and no bloat.
Instead of wasting time formatting time, use Intl.DurationFormat.
No fuss. No bugs. Just beautiful durations.