Intl.DurationFormat
Intl.DurationFormat formats time durations according to locale conventions. It helps applications present hours, minutes, and seconds in a way that matches user expectations.
Overview
Intl.DurationFormat formats time durations according to locale conventions. It helps applications present hours, minutes, and seconds in a way that matches user expectations.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 129 | 129 | 136 | 16.4 | 129 | 16.4 | |
| Built-in object | ||||||
| The Intl.DurationFormat() constructor creates Intl.DurationFormat objects. | 129 | 129 | 136 | 16.4 | 129 | 16.4 |
| The format() method of Intl.DurationFormat instances formats a duration according to the locale and formatting options of this Intl.DurationFormat object. | 129 | 129 | 136 | 16.4 | 129 | 16.4 |
| The formatToParts() method of Intl.DurationFormat instances returns an array of objects representing each part of the formatted string that would be returned by Intl/DurationFormat/format. It is useful for building custom strings from the locale-specific tokens. | 129 | 129 | 136 | 16.4 | 129 | 16.4 |
| The resolvedOptions() method of Intl.DurationFormat instances returns a new object with properties reflecting the options computed during initialization of this DurationFormat object. | 129 | 129 | 136 | 16.4 | 129 | 16.4 |
| The Intl.DurationFormat.supportedLocalesOf() static method returns an array containing those of the provided locales that are supported in duration formatting without having to fall back to the runtime's default locale. | 129 | 129 | 136 | 16.4 | 129 | 16.4 |
Syntax
new Intl.DurationFormat('ja', { style: 'long' })
.format({ hours: 2, minutes: 30 });
// '2 hours 30 minutes' Live demo
Format a duration object
Render the same duration with Intl.DurationFormat when the API is available.
Compare style options
Format the same duration with long, short, and narrow styles.
Build a countdown label
Turn a remaining duration into a readable UI label.
Use cases
Timer displays
Format session lengths, countdowns, or elapsed time in a locale-aware way.
Usage summaries
Present durations in reports, dashboards, and histories without building custom formatting rules.
Cautions
- Decide early whether users need compact, digital, or long-form output so formatting stays consistent across the product.
- Duration formatting solves presentation, not scheduling or timezone logic.
Accessibility
- Localized durations are easier to understand for screen reader users than stitched-together manual strings.
- If time is critical, pair the formatted value with a clear label such as elapsed time or remaining time.
Related links
Powered by web-features