---
title: "Keep calendar dates as dates · Agent Wranglers"
url: https://agentwranglers.se/playbook/app-ui/dates-and-numbers/calendar-dates
updated: 2026-10-20
licence: "All rights reserved"
---

# Keep calendar dates as dates

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: Keep a value with no time of day, such as a due date, as a plain `YYYY-MM-DD` date everywhere. Never turn it into a moment in time.
- How: In JavaScript, `new Date('2026-03-05')` means midnight UTC, which shows as 4 March west of UTC. Use `Temporal.PlainDate`. Firefox 139 and Chrome 144 ship it, but Safari did not in October 2026, so load a polyfill such as `@js-temporal/polyfill` there. Without it, split the string and format with `timeZone: 'UTC'`. Send the date input's `value` string as it is. Store it in a date column, not a timestamp.
- Check: Run the date tests with `TZ=America/Los_Angeles` and `TZ=Pacific/Auckland`. A due date of `2026-03-05` saves and shows as 5 March in both.

Example:

```ts
import { Temporal } from '@js-temporal/polyfill';

export function formatCalendarDate(value: string, locale: string): string {
  return Temporal.PlainDate.from(value).toLocaleString(locale, { dateStyle: 'long' });
}

export function formatCalendarDateWithoutTemporal(value: string, locale: string): string {
  const [year, month, day] = value.split('-').map(Number);
  return new Intl.DateTimeFormat(locale, { dateStyle: 'long', timeZone: 'UTC' }).format(Date.UTC(year, month - 1, day));
}
```

```python
from datetime import date
from babel.dates import format_date

due = date.fromisoformat("2026-03-05")
print(format_date(due, "long", locale="en_GB"))
```

**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/calendar-dates`.

- Previous: [Show times in the user's time zone](https://agentwranglers.se/playbook/app-ui/dates-and-numbers/user-time-zone)
- Next: [Show relative times with the exact time beside them](https://agentwranglers.se/playbook/app-ui/dates-and-numbers/relative-times)
- [Dates and numbers](https://agentwranglers.se/playbook/app-ui/dates-and-numbers)