---
title: "Show times in the user's time zone · Agent Wranglers"
url: https://agentwranglers.se/playbook/app-ui/dates-and-numbers/user-time-zone
updated: 2026-10-20
licence: "All rights reserved"
---

# Show times in the user's time zone

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

- Level: Required
- Chapter: [Dates and numbers](https://agentwranglers.se/playbook/app-ui/dates-and-numbers)
- Rule: Show every moment in time in the user's chosen time zone, and name the zone wherever people in different zones see the same screen.
- How: Receive instants from the API in UTC, as [dates and times](https://agentwranglers.se/playbook/api-design/requests-and-responses/dates-and-times) requires. Store each user's IANA zone, such as `Europe/Stockholm`, in their profile. Default it to the browser's zone. Format with a locale and that zone, as [locale formats](https://agentwranglers.se/playbook/website/languages-and-regions/locale-content) shows. On shared screens, such as a team calendar, add the short zone name to each time.
- Check: Run the component tests in two far-apart zones, such as `TZ=Pacific/Kiritimati` and `TZ=America/Los_Angeles`, with the profile zone set to `Europe/Stockholm`. Every rendered time is the same in both runs.

Example:

```ts
export function formatInstant(isoUtc: string, user: { locale: string; timeZone: string }): string {
  return new Intl.DateTimeFormat(user.locale, {
    dateStyle: 'medium',
    timeStyle: 'short',
    timeZone: user.timeZone,
    timeZoneName: 'short',
  }).format(new Date(isoUtc));
}
```

```python
from datetime import datetime
from zoneinfo import ZoneInfo
from babel import Locale
from babel.dates import format_datetime

def format_instant(iso_utc: str, locale_tag: str, time_zone: str) -> str:
    zone = ZoneInfo(time_zone)
    moment = datetime.fromisoformat(iso_utc).astimezone(zone)
    locale = Locale.parse(locale_tag, sep="-")
    return format_datetime(moment, "medium", tzinfo=zone, locale=locale) + " " + moment.tzname()
```

**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/user-time-zone`.

- Next: [Keep calendar dates as dates](https://agentwranglers.se/playbook/app-ui/dates-and-numbers/calendar-dates)
- [Dates and numbers](https://agentwranglers.se/playbook/app-ui/dates-and-numbers)