Gregorian months shown instead of the Hijri months

[zuhairkareem]

I am using material UI datepicker with an option to show Hijri calendar. The issue is with the months shown in the month picker are gregorian (arabic translation of January, February etc) while the correct one should be Muharram, Safar etc..

• [X ] The issue is present in the latest release.
• [X ] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Arabic translation of Gregorian months shown.

Expected Behavior 🤔

Hijri Months should be shown like Muharram, Safar etc

Steps to Reproduce 🕹

Steps:

Here is a link to codesandbox which has the same issue - https://codesandbox.io/s/7vx23?file=/src/App.js

1. Click on the datepicker, and select a year
2. Month picker with selections which are translations for Gregorian months come up.

Context 🔦

People using Hijri datepicker will be expecting Hijri months instead of Gregorian months for sure :)

Your Environment 🌎

Tech	Version
@material-ui/core	v4.11.4
@material-ui/pickers	v3.3.10
moment	v2.29.1
moment-hijri	v2.1.2
@date-io/hijri	v1.3.9
React	17.0.2
Browser	Chrome

[zuhairkareem]

Found that in MonthView.js file - https://github.com/mui-org/material-ui-pickers/blob/4ee37a74128c84d4152e8dcdd3b863b2605e521e/lib/src/views/Month/MonthView.tsx#L78,

But moment hijri has "iMMM" format to get Hijri months. I am confused about how to change this?

[zuhairkareem]

I extended utils to get the format I want. - https://codesandbox.io/s/material-hijri-calendar-forked-y9e68?file=/src/App.js

export default class HijriUtilsExtended extends HijriUtils {
    format = function (date, format) {
        return format === 'MMM' ? date.format('iMMM') : date.format(format);
    }
   
    // Get the months array in hijri.
    getMonthArray = function (date) {
      const firstMonth = date.clone().locale(this.locale).startOf("iYear");
      const monthArray = [firstMonth];
  
        while (monthArray.length < 12) {
          const prevMonth = monthArray[monthArray.length - 1];
          monthArray.push(prevMonth.clone().add(1, "iMonth"));
        }
        return monthArray;
    }
    
    // Set month in Hijri.
    setMonth = function (date, count) {
        return date.clone().iMonth(count);
    };
}