$conf, $runtime; function_exists('chdir') AND chdir(APP_PATH); $r = 'mysql' == $conf['cache']['type'] ? website_set('runtime', $runtime) : cache_set('runtime', $runtime); } function runtime_truncate() { global $conf; 'mysql' == $conf['cache']['type'] ? website_set('runtime', '') : cache_delete('runtime'); } register_shutdown_function('runtime_save'); ?>javascript - React : MUI X Picker date-io Jalaali Utils returns error : TypeError: utils.getDayText is not a function - Stack Ov|Programmer puzzle solving

Programmer puzzle solving

    最新消息：Welcome to the puzzle paradise for programmers! Here, a well-designed puzzle awaits you. From code logic puzzles to algorithmic challenges, each level is closely centered on the programmer's expertise and skills. Whether you're a novice programmer or an experienced tech guru, you'll find your own challenges on this site. In the process of solving puzzles, you can not only exercise your thinking skills, but also deepen your understanding and application of programming knowledge. Come to start this puzzle journey full of wisdom and challenges, with many programmers to compete with each other and show your programming wisdom! Translated with DeepL.com (free version)
    你的位置： HOME>matter>javascript - React : MUI X Picker date-io Jalaali Utils returns error : TypeError: utils.getDayText is not a function - Stack Ov

    javascript - React : MUI X Picker date-io Jalaali Utils returns error : TypeError: utils.getDayText is not a function - Stack Ov

    matteradmin15PV0评论

    This is NOT a duplication of because I don't have problems with the original usage.
    According to this link here /localization/calendar-systems I have used JalaliUtils from @date-io/jalaali. Here is my code and you can see that I have used two different utils which with JalaaliUtils I get two errors of:

    TypeError: utils.getDayText is not a function

    TypeError: utils.getYearText is not a function

    Instead it works just fine if I use MomentUtils from @date-io/moment but this is not what I want. is there any bugs with the package itself ?

    import React, { useState } from "react";
import moment from "moment";
import jMoment from "moment-jalaali";
import JalaliUtils from "@date-io/jalaali";
import MomentUtils from '@date-io/moment';
import {
  DatePicker,
  MuiPickersUtilsProvider,
} from "@material-ui/pickers";

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

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

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

export default PersianExample;

    My package.json

    {
  "name": "search-documents",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@apollo/react-hooks": "^3.1.3",
    "@date-io/date-fns": "1.x",
    "@date-io/dayjs": "1.x",
    "@date-io/jalaali": "^2.3.0",
    "@date-io/moment": "1.x",
    "@material-ui/core": "^4.8.3",
    "@material-ui/icons": "^4.5.1",
    "@material-ui/pickers": "^3.2.10",
    "@reduxjs/toolkit": "^1.2.3",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "@types/apollo-upload-client": "^8.1.3",
    "@types/jest": "^24.0.0",
    "@types/moment-jalaali": "^0.7.4",
    "@types/node": "^12.0.0",
    "@types/react": "^16.9.19",
    "@types/react-dom": "^16.9.0",
    "@types/react-redux": "^7.1.7",
    "@types/react-router-dom": "^5.1.3",
    "apollo-boost": "^0.4.7",
    "apollo-upload-client": "^12.1.0",
    "crypto-js": "^3.1.9-1",
    "date-fns": "^2.9.0",
    "dayjs": "^1.8.20",
    "graphql": "^14.5.8",
    "jss-rtl": "^0.3.0",
    "moment": "^2.24.0",
    "moment-jalaali": "^0.9.1",
    "react": "^16.12.0",
    "react-advance-jalaali-datepicker": "^1.2.2",
    "react-apollo": "^3.1.3",
    "react-dom": "^16.12.0",
    "react-redux": "^7.1.3",
    "react-relay": "^8.0.0",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.3.0",
    "redux": "^4.0.5",
    "typescript": "~3.7.2",
    "yup": "^0.28.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

    This is NOT a duplication of https://github./mui-org/material-ui-pickers/issues/1440 because I don't have problems with the original usage.
    According to this link here https://material-ui-pickers.dev/localization/calendar-systems I have used JalaliUtils from @date-io/jalaali. Here is my code and you can see that I have used two different utils which with JalaaliUtils I get two errors of:

    TypeError: utils.getDayText is not a function

    TypeError: utils.getYearText is not a function

    Instead it works just fine if I use MomentUtils from @date-io/moment but this is not what I want. is there any bugs with the package itself ?

    import React, { useState } from "react";
import moment from "moment";
import jMoment from "moment-jalaali";
import JalaliUtils from "@date-io/jalaali";
import MomentUtils from '@date-io/moment';
import {
  DatePicker,
  MuiPickersUtilsProvider,
} from "@material-ui/pickers";

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

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

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

export default PersianExample;

    My package.json

    {
  "name": "search-documents",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@apollo/react-hooks": "^3.1.3",
    "@date-io/date-fns": "1.x",
    "@date-io/dayjs": "1.x",
    "@date-io/jalaali": "^2.3.0",
    "@date-io/moment": "1.x",
    "@material-ui/core": "^4.8.3",
    "@material-ui/icons": "^4.5.1",
    "@material-ui/pickers": "^3.2.10",
    "@reduxjs/toolkit": "^1.2.3",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "@types/apollo-upload-client": "^8.1.3",
    "@types/jest": "^24.0.0",
    "@types/moment-jalaali": "^0.7.4",
    "@types/node": "^12.0.0",
    "@types/react": "^16.9.19",
    "@types/react-dom": "^16.9.0",
    "@types/react-redux": "^7.1.7",
    "@types/react-router-dom": "^5.1.3",
    "apollo-boost": "^0.4.7",
    "apollo-upload-client": "^12.1.0",
    "crypto-js": "^3.1.9-1",
    "date-fns": "^2.9.0",
    "dayjs": "^1.8.20",
    "graphql": "^14.5.8",
    "jss-rtl": "^0.3.0",
    "moment": "^2.24.0",
    "moment-jalaali": "^0.9.1",
    "react": "^16.12.0",
    "react-advance-jalaali-datepicker": "^1.2.2",
    "react-apollo": "^3.1.3",
    "react-dom": "^16.12.0",
    "react-redux": "^7.1.3",
    "react-relay": "^8.0.0",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.3.0",
    "redux": "^4.0.5",
    "typescript": "~3.7.2",
    "yup": "^0.28.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}
    • javascript
    • reactjs
    • material-ui
    • datepicker
    • mui-x-date-picker
    Share Improve this question edited Mar 28 at 11:20 Olivier Tassinari 8,6906 gold badges25 silver badges28 bronze badges asked Feb 8, 2020 at 16:57 Mohammad K.Mohammad K. 2683 silver badges13 bronze badges 4
    • Can you provide your package.json? Which version of @date-io do you use? – user11284257 Commented Feb 8, 2020 at 17:05
    • Yes I added my package.json – Mohammad K. Commented Feb 8, 2020 at 17:21
    • Please check the ment for @date-io v2.0.0 github./dmtrKovalenko/date-io/releases : Do not update if you are using @material-ui/pickers v3 – user11284257 Commented Feb 8, 2020 at 17:40
    • yes I think I should downgrade @date-io/jalaali version too. – Mohammad K. Commented Feb 8, 2020 at 17:50
    Add a ment  | 

    1 Answer 1

    Reset to default 7

    Use 1.x version npm install @date-io/[email protected]

    continue to browse articles about articles of

    Articles related to this article

    Post a comment

    comment list (0)

    1. No comments so far