Skip to content

fix(@formatjs/intl-datetimeformat): fix formatRange date duplication with hour12 and 2-digit hour#6053

Merged
longlho merged 1 commit intomainfrom
fix/formatrange-hour12-2digit-4535
Mar 3, 2026
Merged

fix(@formatjs/intl-datetimeformat): fix formatRange date duplication with hour12 and 2-digit hour#6053
longlho merged 1 commit intomainfrom
fix/formatrange-hour12-2digit-4535

Conversation

@longlho
Copy link
Member

@longlho longlho commented Mar 3, 2026

Summary

Fixes #4535

When using formatRange with hour: '2-digit' and hour12: true, the date portion was duplicated in the output:

// Before: "Sun, Sep 22, 02:00 PM – Sun, Sep 22, 04:00 PM"
// After:  "Sun, Sep 22, 02:00 – 04:00 PM"

Root Cause

BestFitFormatMatcher correctly selected a format with skeleton "MMMEd, h:mm a" (matching the 2-digit hour preference), but the interval format lookup in __addLocaleData only checked for exact key matches. Since CLDR interval formats use canonical skeleton keys ("MMMEd, hm") rather than raw pattern keys ("MMMEd, h:mm a"), the lookup returned undefined and formatRange fell back to the default pattern which formats start and end dates separately.

Fix

Added findIntervalFormat() in core.ts that canonicalizes raw time skeleton patterns when the exact key doesn't match. For example, "h:mm a""hm", "HH:mm:ss""Hms". This runs only as a fallback during locale data loading when the direct key lookup fails.

Why en-GB worked but en didn't in existing tests

The existing tests used en-GB with hour: 'numeric', which matched the canonical hm skeleton directly. The en locale with hour: '2-digit' matched h:mm a which lacked interval formats.

Test plan

  • Added 2 test cases for en locale with hour12: true (both numeric and 2-digit)
  • All 484 tests pass via pnpm t
  • Existing en-GB tests continue to pass

Copy link
Member Author

longlho commented Mar 3, 2026


How to use the Graphite Merge Queue

Add either label to this PR to merge it via the merge queue:

  • main - adds this PR to the back of the merge queue
  • hotfix - for urgent hot fixes, skip the queue and merge this PR next

You must have a Graphite account in order to use the merge queue. Sign up using this link.

An organization admin has required the Graphite Merge Queue in this repository.

Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue.

This stack of pull requests is managed by Graphite. Learn more about stacking.

…with hour12 and 2-digit hour

When using hour: '2-digit' with hour12: true, BestFitFormatMatcher
selected a format with skeleton "MMMEd, h:mm a" instead of "MMMEd, hm".
The raw pattern form didn't match any interval format key, causing
formatRange to fall back to the default pattern which duplicates dates.

Added findIntervalFormat() to canonicalize raw time skeletons (e.g.,
"h:mm a" → "hm") when looking up interval formats during locale data
loading.

Fixes #4535

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@longlho longlho force-pushed the fix/formatrange-hour12-2digit-4535 branch from a36f524 to f0fbe9c Compare March 3, 2026 12:14
@longlho longlho merged commit eb68a6b into main Mar 3, 2026
8 checks passed
@longlho longlho deleted the fix/formatrange-hour12-2digit-4535 branch March 3, 2026 12:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Weird behavior of FormattedDateTimeRange in React Native

1 participant