Persian calendar year and month view

Environment

Tech	Version
@material-ui/pickers	latest
material-ui	4.0.0-beta.2
React	16.8.6
Browser	chrome
Peer library	@date-io/jalaali: “1.3.5”, moment-jalaali: “0.8.3”

Expected behavior

expected month name to be in jalaali format something like فروردین اردیبهشت خرداد ...

Actual behavior

month name are not in jalaali format and after choose one, year may change because of jalaali date time difference

Live example

https://codesandbox.io/s/materialuipickersusagedemo-6tqti?fontsize=14

[pesehr]

@mohsensaremi use this:

    JalaliUtils.prototype.getDatePickerHeaderText = function (date) {
      return date.format("ddd, jD jMMMM");
    };

[pesehr]

Dear @mohsensaremi This is a problem in date-io/jalaali library. You can solve that temporary by overriding these methods.

import JalaliUtils from "@date-io/jalaali";

JalaliUtils.prototype.getMonthArray = function (date) {
      date = jMoment(date)
      var firstMonth = date.clone().startOf("jyear");
      var monthArray = [firstMonth];
      while (monthArray.length < 12) {
        var prevMonth = monthArray[monthArray.length - 1];
        monthArray.push(this.getNextMonth(prevMonth));
      }
      return monthArray;
    }; 

    JalaliUtils.prototype.format = function (date, formatString) {
      if (formatString === 'MMM')
        formatString = 'jMMMM'
      return date.format(formatString);
    };

   JalaliUtils.prototype.getMonth = function (date) {
      date = jMoment(date)
      let months = JalaliUtils.prototype.getMonthArray(date)
      for (let i = 0; i < months.length; i++) {
        if (months[i].format('jMMMM') === date.format('jMMMM')) {
          return i;
        }
      }
      return date.get("month");
    };

   JalaliUtils.prototype.setMonth = function (date, count) {
      date = jMoment(date)
      return date.clone().jMonth(count);
    };