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>
                 );