fix(i18n): support Arabic comma separator in date-picker weekDays and monthNames (#14663)

## Problem

The Arabic locale strings in `ar.json` use the Arabic comma `،` (U+060C)
as separator:

```json
"com.affine.calendar-date-picker.week-days": "أ،إث،ث،أر،خ،ج،س"
```

But `day-picker.tsx` splits on ASCII comma only — causing all
weekday/month names to render as a single unsplit string in Arabic
locale.

## Fix

Change `.split(',')` to `.split(/[,،]/)` in two call sites — matches
both ASCII and Arabic comma.

## Impact

One-line fix per call site. No other functionality affected. All
non-Arabic locales unchanged.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Bug Fixes**
* Date picker rendering updated to correctly handle both ASCII and
Arabic/Persian comma formats when determining month and weekday labels.
This fixes inconsistent header and month-name displays in locales using
different comma characters while preserving existing interactions and
behavior.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
Mohad
2026-03-19 05:42:58 +03:00
committed by DarkSky
parent 8ca8333cd6
commit cb9897d493
2 changed files with 3 additions and 3 deletions

View File

@@ -126,7 +126,7 @@ export const DayPicker = memo(function DayPicker(
data-month={cursor.month()}
data-year={cursor.year()}
>
{monthNames.split(',')[cursor.month()]}
{monthNames.split(/[,،]/)[cursor.month()]}
</button>
<button
className={styles.calendarHeaderTriggerButton}
@@ -172,7 +172,7 @@ export const DayPicker = memo(function DayPicker(
<main className={styles.monthViewBody}>
{/* weekDays */}
<div className={styles.monthViewRow}>
{weekDays.split(',').map(day => (
{weekDays.split(/[,،]/).map(day => (
<div
key={day}
className={clsx(

View File

@@ -145,7 +145,7 @@ export const MonthPicker = memo(function MonthPicker(
tabIndex={month.isSame(monthCursor, 'month') ? 0 : -1}
aria-label={monthValue}
>
{monthNames.split(',')[month.month()]}
{monthNames.split(/[,،]/)[month.month()]}
</button>
</div>
);