Human-readable durations
Intl.DurationFormat
Chrome129
Edge129
Firefox136
Safari16.4
Features it needs
- Intl.DurationFormatNewly available
These libraries carry their own unit names and plural rules for every language they support, which is where most of their weight goes. Intl.DurationFormat takes a plain object of years, hours, minutes and seconds and renders it in the requested locale using the data the browser already holds. The three styles, long, short and narrow, cover the usual range from "1 hour, 30 minutes" down to "1h 30m".
When this applies
Rendering a length of time as text, such as "1 hour, 30 minutes".
The native approach
const fmt = new Intl.DurationFormat("en", { style: "long" });
fmt.format({ hours: 1, minutes: 30 });
// "1 hour, 30 minutes"
new Intl.DurationFormat("de", { style: "narrow" }).format({
minutes: 45,
seconds: 10,
});
// "45 Min. 10 Sek."When the dependency is still right
An answer that always says "the platform covers it" is worse than no answer. These are the cases where this one does not hold.
- You pass milliseconds and expect the library to split them into units. Intl.DurationFormat formats a duration object you have already broken down, so the arithmetic stays yours until Temporal.Duration is available.
- You need the exact output shape of the current library. humanize-duration and pretty-ms have their own conventions for rounding, unit selection and separators, and changing them is a visible change to every screen.
- Your support target predates Intl.DurationFormat becoming Baseline newly available, in which case the library is the fallback.
- You need a compact form the standard does not model, such as a stopwatch reading of 01:30:05, which is padding and string joining rather than locale formatting.
- You rely on the library's largest and smallest unit options to drop units automatically, which Intl expects you to decide before you call it.
Building it
This catalog stops at the swap. These guides go through the implementation and the fallbacks, and each one reads in the terminal through its own command.
- Format human readable durations
npx -y modern-web-guidance@latest retrieve "format-human-readable-durations"
Signs it was hand-rolled
No package is involved in any of these, so nothing would match in a package.json. If the code looks like one of them, this rule applies anyway, and the conditions above still decide.
- already-split hours, minutes and seconds joined with hardcoded unit labels and plural rules