Farzin/70813/Fix date picker month issue for non english languages

packages/components/src/components/calendar/calendar-header.jsx

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { addMonths, addYears, subMonths, subYears, toMoment } from '@deriv/shared';
 import Button from './calendar-button.jsx';
-import { month_headers, getCentury, getDecade } from './helpers';
+import { getCentury, getDecade } from './helpers';
 
 const Header = ({
     calendar_date,
@@ -77,7 +77,7 @@ const Header = ({
                     <Button
                         className='dc-calendar__btn--select'
                         is_hidden={!is_date_view}
-                        label={month_headers[moment_date.format('MMM')]}
+                        label={moment_date.format('MMM')}
                         onClick={() => (disable_month_selector ? undefined : switchView('month'))}
                     />
                 )}

packages/components/src/components/calendar/helpers/constants.js

@@ -1,21 +1,5 @@
 import { toMoment } from '@deriv/shared';
 
-// TODO: localize
-export const month_headers = {
-    Jan: 'Jan',
-    Feb: 'Feb',
-    Mar: 'Mar',
-    Apr: 'Apr',
-    May: 'May',
-    Jun: 'Jun',
-    Jul: 'Jul',
-    Aug: 'Aug',
-    Sep: 'Sep',
-    Oct: 'Oct',
-    Nov: 'Nov',
-    Dec: 'Dec',
-};
-
 export const week_headers = {
     Monday: 'Monday',
     Tuesday: 'Tuesday',

packages/components/src/components/calendar/helpers/index.js

@@ -1 +1 @@
-export { month_headers, week_headers, week_headers_abbr, getDaysOfTheWeek, getDecade, getCentury } from './constants';
+export { week_headers, week_headers_abbr, getDaysOfTheWeek, getDecade, getCentury } from './constants';

packages/components/src/components/calendar/views/calendar-months.jsx

@@ -2,30 +2,32 @@ import classNames from 'classnames';
 import React from 'react';
 import { toMoment } from '@deriv/shared';
 import { CommonPropTypes } from './types';
-import { month_headers } from '../helpers';
 
 const Months = ({ calendar_date, isPeriodDisabled, selected_date, updateSelected }) => {
     const moment_date = toMoment(calendar_date);
     const moment_selected_date = toMoment(selected_date);
+    const is_same_year = moment_selected_date.isSame(moment_date, 'year');
+    const selected_month_number = Number(moment_selected_date.clone().format('M'));
+    const months_numbers = [...Array(12).keys()];
 
     return (
         <div className='dc-calendar__body dc-calendar__body--month'>
-            {Object.keys(month_headers).map((month, idx) => {
-                const is_active =
-                    month === moment_selected_date.clone().format('MMM') &&
-                    moment_selected_date.isSame(moment_date, 'year');
-                const is_disabled = isPeriodDisabled(moment_date.clone().month(month), 'month');
+            {months_numbers.map(month_number => {
+                const month = moment_date.clone().month(month_number);
+                const is_active = is_same_year && selected_month_number === month_number + 1;
+                const is_disabled = isPeriodDisabled(month, 'month');
+
                 return (
                     <span
-                        key={idx}
+                        key={month_number}
                         className={classNames('dc-calendar__cell', {
                             'dc-calendar__cell--active': is_active,
                             'dc-calendar__cell--disabled': is_disabled,
                         })}
                         onClick={is_disabled ? undefined : e => updateSelected(e, 'month')}
-                        data-month={month}
+                        data-month={month_number}
                     >
-                        {month_headers[month]}
+                        {month.format('MMM')}
                     </span>
                 );
             })}