在回历材料 UI 日期选择器中显示的月份是公历

Question

我正在使用 Material UI 日期选择器，我们可以选择显示回历日历。问题在于月份选择器中显示的月份是公历（一月、二月等的阿拉伯语翻译），而正确的月份应该是穆哈拉姆、萨法尔等。我如何在其中获得回历月份？我看到了一个具有相同问题的代码和框，我将在此处链接 - https://codesandbox.io/s/7vx23?file=/src/App.js?

Answer 1

我扩展了 HijriUtils 库以获得回历月份。在月视图中， utils.format(date, 'MMM') 用于获取月份（这是 mi-ui-datepicker 版本 - 3.3.10 与 material-ui 4.x 版本（最新稳定版）、datepicker 兼容是 5.x 中 material-ui 的一部分（仍处于测试阶段）），回历月份格式为“iMMM”。我添加了 format 方法以 Hijri 方式完成它。我们还需要 HijriUtils 中的 getMonthArray、setMonth 方法来正确获取/设置月份。

export default class HijriUtilsExtended extends HijriUtils {
// 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);
    };
     
    format = function (date, format) {
      return format === 'MMM' ? date.format('iMMM') : date.format(format);
    }
}

这是更新的代码和框链接 - https://codesandbox.io/s/material-hijri-calendar-forked-y9e68?file=/src/App.js