Material UI Pickers - Jalali 日历问题

Far*_*689 7 reactjs material-ui

我在我的 React 应用程序中使用 Material-UI 选择器,但我很难让 Jalali 日历示例正常工作。我使用的软件包版本是:

"@date-io/jalaali": "^1.3.13",
"@date-io/moment": "^1.3.13",
"@material-ui/core": "^4.8.3",
"@material-ui/icons": "^4.5.1",
"@material-ui/pickers": "^3.2.8",
"moment": "^2.24.0",
"moment-jalaali": "^0.9.1",
"react": "^16.12.0",
"react-scripts": "3.3.0",
"react-dom": "^16.12.0",
Run Code Online (Sandbox Code Playgroud)

错误适用TypeError: utils.getDayText is not a function于 DatePicker、TypeError: utils.getHourText is not a functionTimePicker 和TypeError: utils.getYearText is not a function DateTimePicker。我试图更改某些软件包的版本,但没有任何反应。

编辑:

我发现问题出在<MuiPickersUtilsProvider utils={JalaliUtils} locale="fa">.

import moment from "moment";
import jMoment from "moment-jalaali";
import React, { useState } from "react";
import JalaliUtils from "@date-io/jalaali";

import {
  DatePicker,
  MuiPickersUtilsProvider,
} from "@material-ui/pickers";

jMoment.loadPersian({ dialect: "persian-modern", usePersianDigits: true });

function PersianExample() {
  const [selectedDate, handleDateChange] = useState(moment());

  return (
    <MuiPickersUtilsProvider utils={JalaliUtils} locale="fa">
      <DatePicker
        clearable
        okLabel="?????"
        cancelLabel="???"
        clearLabel="??? ????"
        labelFunc={date => (date ? date.format("jYYYY/jMM/jDD") : "")}
        value={selectedDate}
        onChange={handleDateChange}
      />
    </MuiPickersUtilsProvider>
  );
}

export default PersianExample;
Run Code Online (Sandbox Code Playgroud)

Far*_*689 9

奇怪的是,这个例子现在正在使用 "@date-io/jalaali": "^1.3.12" 但是,这两个版本之间没有太大的区别。谢谢亚历克斯沙箱