Bifrost Design System

import FormatDuration from "@intility/bifrost-react/FormatDuration";

FormatDuration

Props

New in 6.10

Display human-readable duration between a start and end Date object, with a tooltip displaying full datetime including time zone.

Displays days if over 2: "7 days"
Displays hours if over 2: "24 hours"
Otherwise minutes: "30 minutes"

<FormatDuration
  start={new Date("2025-11-18T11:11Z")} // 11 a.m.
  end={new Date("2025-11-18T15:11Z")} // 3 p.m.
/>

4 hours

Also see /react/examples/datepickerrange

Datepicker range demo with presets

Compatibility

Sandbox

Open Sandbox

import FormatDuration from "@intility/bifrost-react/FormatDuration";
import Grid from "@intility/bifrost-react/Grid";

export default function FormatDurationDemo() {
  return (
    <Grid style={{ justifyItems: "start" }}>
      <FormatDuration
        start={new Date("2025-11-18T11:11Z")}
        end={new Date("2025-11-25T11:11Z")}
      />
      <FormatDuration
        start={new Date("2025-11-18T11:11Z")}
        end={new Date("2025-11-18T15:11Z")}
      />
      <FormatDuration
        start={new Date("2025-11-18T11:11Z")}
        end={new Date("2025-11-18T11:41Z")}
      />
    </Grid>
  );
}