Additional character appended to Calendar cells in various locales

[lreis]

🐛 Bug Report

An extra character is appended in calendar date cells, in various locales. For example:

Japanese (Japan)
Calendar component

useCalendar hook (Storybook)

Danish (Denmark) / Norwegian (Norway)
Calendar component

useCalendar hook (Storybook)

This was previously reported in this discussion.

🤔 Expected Behavior

No extra characters should be displayed in calendar day cells, in any locale. Only the day digits should be displayed.

😯 Current Behavior

This impacts the Calendar, DatePicker, DateRangePicker, and RangeCalendar components, and the useCalendar hook, in the following Storybook locales:

• Chinese Simplified / Traditional
• Japanese (Japan)
• Korean (Korea)
• Danish (Denmark)
• Norwegian (Norway)
• Croatian (Croatia)
• Czech (Czech Republic)
• Slovak (Slovakia)
• Slovenian (Slovenia)

💁 Possible Solution

For the components, the formatting of calendar cells seems to be taking place here:

https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/calendar/src/useCalendarCell.ts#L305

...where the date is formatted using the "numeric" option of the day representation.

For some locales, this option will display an extra character, which is expected when displaying dates that also include the month and year, e.g. "2023年2月28日", "28. februar 2023", "28. februar"

But in the context of a calendar, the use of these extra characters is inappropriate.

The formatToParts method provides a way to split the day digits from the extra characters:

let formattedDate = useMemo(() => cellDateFormatter.formatToParts(nativeDate)[0].value, [cellDateFormatter, nativeDate]);

Array ["28", "日"]

Array ["28", "."]

Test results of this fix

For the useCalendar hook in Storybook, the formatting of the calendar cell seems to occur here:

https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/calendar/stories/Example.tsx#L63

Once formattedDate is fixed in useCalendarCell, it could be used here instead of applying the dateFormatter on props.date.

🔦 Context

This issue is quite noticeable to users. It should be fixed.

🧢 Your Company/Team

Adobe Localization

[lreis]

@snowystinger looks perfect now, thanks!