Skip to content

fix(demo): format month via PlainDate to avoid calendar-mismatch crash#27

Merged
dogmar merged 1 commit into
mainfrom
claude/interesting-hellman-4e8b4c
Jun 16, 2026
Merged

fix(demo): format month via PlainDate to avoid calendar-mismatch crash#27
dogmar merged 1 commit into
mainfrom
claude/interesting-hellman-4e8b4c

Conversation

@dogmar

@dogmar dogmar commented Jun 16, 2026

Copy link
Copy Markdown
Collaborator

What

The /demo page's onMonthChange handler formatted the month by calling toLocaleString directly on a Temporal.PlainYearMonth. Clicking the next/prev month button crashed with:

cannot format PlainYearMonth with calendar iso8601 in locale with calendar gregory

This fixes it by formatting through an ISO PlainDate instead.

Why

A PlainYearMonth (and PlainMonthDay) carries the iso8601 calendar. When toLocaleString resolves a locale whose calendar differs (e.g. gregory for en-US), Temporal throws on the calendar mismatch. An ISO PlainDate does not have this restriction — Intl renders it in the locale's calendar — so converting via .toPlainDate({ day: 1 }) before formatting avoids the crash.

This mirrors the exact technique the library's own MonthYearString component already uses (see package/src/navigation.tsx).

Verification

Reproduced against @js-temporal/polyfill directly (the source of the error):

  • Before — formatting the PlainYearMonth directly throws the exact error above.
  • After.toPlainDate({ day: 1 }).toLocaleString(...) renders "July 2026".
  • A non-gregory locale (th-TH) correctly renders the Buddhist year 2569, confirming locale calendars still display properly.

Notes for reviewer

  • Single-file website fix; no library/public-API change.
  • The dev server and vp fmt/lint couldn't be run in this worktree (its dependency tree isn't fully installed — vite-plus/@tanstack/devtools-vite missing), so verification was done against the polyfill where the error originates. The edit follows the surrounding 2-space style and line-length conventions.
  • Checked the rest of the website: no other spot formats a PlainYearMonth directly (the one other Intl.format call uses a native Date, which is safe).

🤖 Generated with Claude Code

The /demo page's onMonthChange handler called `toLocaleString` directly on
a `Temporal.PlainYearMonth`, which carries the iso8601 calendar. For locales
that resolve to a different calendar (e.g. gregory for en-US), Temporal throws
"cannot format PlainYearMonth with calendar iso8601 in locale with calendar
gregory" — so clicking the next/prev month button errored out.

Format through an ISO `PlainDate` (`.toPlainDate({ day: 1 })`) instead, which
Intl renders in the locale's calendar without throwing. This mirrors the
technique the library's own MonthYearString component already uses.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@netlify

netlify Bot commented Jun 16, 2026

Copy link
Copy Markdown

Deploy Preview for colander-cal ready!

Name Link
🔨 Latest commit 4daa5dd
🔍 Latest deploy log https://app.netlify.com/projects/colander-cal/deploys/6a30980e01de6b000992050d
😎 Deploy Preview https://deploy-preview-27--colander-cal.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@dogmar dogmar merged commit ba80bb9 into main Jun 16, 2026
7 checks passed
@dogmar dogmar deleted the claude/interesting-hellman-4e8b4c branch June 16, 2026 00:29
@github-actions

Copy link
Copy Markdown
Contributor

🎉 This PR is included in version 3.0.1-alpha.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant