From cb9897d4935549db34278f66d114a080ca0aa433 Mon Sep 17 00:00:00 2001
From: Mohad <mr.mohad@gmail.com>
Date: Thu, 19 Mar 2026 05:42:58 +0300
Subject: [PATCH] fix(i18n): support Arabic comma separator in date-picker
 weekDays and monthNames (#14663)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 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 -->
---
 .../component/src/ui/date-picker/calendar/day-picker.tsx      | 4 ++--
 .../component/src/ui/date-picker/calendar/month-picker.tsx    | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/frontend/component/src/ui/date-picker/calendar/day-picker.tsx b/packages/frontend/component/src/ui/date-picker/calendar/day-picker.tsx
index d15908b0d9..5f885ca8fe 100644
--- a/packages/frontend/component/src/ui/date-picker/calendar/day-picker.tsx
+++ b/packages/frontend/component/src/ui/date-picker/calendar/day-picker.tsx
@@ -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(
diff --git a/packages/frontend/component/src/ui/date-picker/calendar/month-picker.tsx b/packages/frontend/component/src/ui/date-picker/calendar/month-picker.tsx
index 1466ed2c3c..e75fbc0762 100644
--- a/packages/frontend/component/src/ui/date-picker/calendar/month-picker.tsx
+++ b/packages/frontend/component/src/ui/date-picker/calendar/month-picker.tsx
@@ -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>
                 );