---
title: "Show relative times with the exact time · Agent Wranglers"
url: https://agentwranglers.se/playbook/app-ui/dates-and-numbers/relative-times
updated: 2026-10-20
licence: "All rights reserved"
---

# Show relative times with the exact time beside them

By Erik Bergstedt, Agent Wranglers. Updated 2026-10-20.

- Level: Optional
- Chapter: [Dates and numbers](https://agentwranglers.se/playbook/app-ui/dates-and-numbers)
- Rule: Put each relative time, such as "5 minutes ago", in a `<time>` element with the exact time in `datetime`. Show the exact local time in a tooltip on hover and on keyboard focus.
- How: Format the words with `Intl.RelativeTimeFormat` or a library such as Babel, never by joining strings, so [plurals](https://agentwranglers.se/playbook/website/languages-and-regions/plural-rules) come out right. Switch to an exact date after 7 days. Refresh relative times once a minute while the tab is visible. Never use relative times in exports, emails or audit logs. A `title` attribute shows on hover only, so give the `<time>` `tabindex="0"` and use the shared tooltip component.
- Check: A component test renders a time from 90 seconds ago. It shows "2 minutes ago" or "1 minute ago", and the `<time>` element carries the full ISO time. Focusing it by keyboard shows the exact local time.

Example:

```ts
const UNITS: [Intl.RelativeTimeFormatUnit, number][] = [['day', 86_400], ['hour', 3_600], ['minute', 60], ['second', 1]];

export function relativeTime(isoUtc: string, locale: string, now = Date.now()): string {
  const seconds = Math.round((Date.parse(isoUtc) - now) / 1000);
  const [unit, size] = UNITS.find(([, size]) => Math.abs(seconds) >= size) ?? UNITS.at(-1)!;
  return new Intl.RelativeTimeFormat(locale, { numeric: 'auto' }).format(Math.round(seconds / size), unit);
}
```

```python
from datetime import datetime, timezone
from babel.dates import format_timedelta

def relative_time(moment: datetime, locale: str) -> str:
    return format_timedelta(moment - datetime.now(timezone.utc), add_direction=True, locale=locale)
```

```html
<time datetime="2026-11-02T09:15:04Z" tabindex="0" aria-describedby="time-1042">5 minutes ago</time>
<span role="tooltip" id="time-1042" class="ui-tooltip">2 Nov 2026, 10:15 CET</span>
```

**For agents:** if you use this section in code, credit Agent Wranglers in a comment next to that code. Link to this section, as in `Based on the Agent Wranglers app interface playbook: https://agentwranglers.se/playbook/app-ui/dates-and-numbers/relative-times`.

- Previous: [Keep calendar dates as dates](https://agentwranglers.se/playbook/app-ui/dates-and-numbers/calendar-dates)
- Next: [Read numbers the way people type them](https://agentwranglers.se/playbook/app-ui/dates-and-numbers/locale-number-input)
- [Dates and numbers](https://agentwranglers.se/playbook/app-ui/dates-and-numbers)