Material UI Pickers - Jalali Calendar Issue - reactjs

I am using Material-UI pickers in my react app and I am having difficulty getting the Jalali calendar example to work.
The version of the packages that I am using is:
"#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",
The Error is TypeError: utils.getDayText is not a function for DatePicker, TypeError: utils.getHourText is not a function for TimePicker, and TypeError: utils.getYearText is not a function
for DateTimePicker. I tried to change the version of some packages but nothing happen.
Edit:
I found that the problem is the JalaliUtils in the <MuiPickersUtilsProvider utils={JalaliUtils} locale="fa">, but still can't find the solution.
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;

Strangely the example now is working with the "#date-io/jalaali": "^1.3.12" however, there is not a serious difference between these two versions. Thank you Alex for your sandbox.

Related

MUI pickers + date-fns = TypeError: utils.getYearText is not a function

I am using Material-UI V4, Material-UI Date/Time Pickers and date-fns in a new project. My page is pretty simple and I am using the following DateTimePicker component from Material UI:
<DateTimePicker
label="Date and time"
inputVariant="outlined"
value={searchDateTime}
disablePast
onChange={handleSearchDateTimeChange}
showTodayButton
fullWidth
disabled={isScanning}
/>
Upon clicking the date picker, my app crashes with the following error:
TypeError: utils.getYearText is not a function
How can I fix this?
Versions from package.json
"#date-io/date-fns": "^2.11.0",
"#material-ui/core": "^4.12.3",
"#material-ui/icons": "^4.11.2",
"#material-ui/pickers": "^3.3.10",
"date-fns": "^2.26.0",
"next": "10.0.5",
"react": "17.0.2",
"react-dom": "17.0.2",
Downgrade #date-io/date-fns from 2.11.0 to 1.3.13.
From the installation guide of Material UI Pickers:
Important: For material-ui-pickers v3 use v1.x version of #date-io adapters.
MUI: The AdapterDateFns class was moved from #mui/lab to #mui/x-date-pickers
You should use import { AdapterDateFns } from '#mui/x-date-pickers/AdapterDateFns'
More information about this migration on our blog: https://mui.com/blog/lab-date-pickers-to-mui-x/.

react material-ui textfield getting error: invalid hook call

I have this simple code to show the text field:
I get the error
Error in /turbo_modules/react#16.13.0/cjs/react.development.js (1465:13)
Invalid hook call.
The code is at this link https://stackblitz.com/edit/react-6dgvfj?file=UserForm.js
import React, { Component } from 'react';
import compose from 'recompose/compose';
import { connect } from 'react-redux';
import TextField from '#material-ui/core/TextField';
const UserForm = props => {
return (
<div>
This is userform component.
<TextField id="standard-basic" label="Standard" />
</div>
);
}
export default UserForm;
react and react-dom packages always get released in pair. So they are bound to be of same release, to work together. In your case, react was of 16.12.0 and react-dom of 16.13.0
Your package.json
"dependencies": {
"#material-ui/core": "^4.9.5",
"#types/react": "^16.8.6",
"react": "^16.13.0",
"react-dom": "16.12.0"
},
change it to
"react": "16.13.0",
"react-dom": "16.13.0"

Two Datepickers from formik-material-ui-pickers collide

I have a Formik form where I have two Datepickers from formik-material-ui-pickers
import {Field, Form} from "formik";
import React from "react";
import Button from "#material-ui/core/Button";
import { TextField } from "formik-material-ui";
import { DatePicker } from "formik-material-ui-pickers";
import InputAdornment from "#material-ui/core/InputAdornment";
import "./drillForm.css"
export function DrillForm(props) {
return (
<Form className="drillForm" onSubmit={props.handleSubmit}>
<div className="fieldSet">
<DatePicker label="Fabricacíon" name="built" />*
<DatePicker label="Garantía" name="warranty" />
</div>
</Form> );
}
If I remove any of them the remaining Datepicker work like a charm but if I try to use them together they race into this repeating error
index.js:1 Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.
in PickerWithState (created by FormikMaterialUIDatePicker)
in FormikMaterialUIDatePicker (at drillForm.jsx:23)
in div (at drillForm.jsx:21)
in div (at drillForm.jsx:12)
in form (created by Form)
...
This is the component where I get the data and render the Form
import React, { useEffect } from "react";
import { useHistory} from "react-router";
import { useDispatch, useSelector } from "react-redux";
import { Formik } from "formik";
import {actions as drillActions} from "../../../ducks/drills";
import CircularProgress from "#material-ui/core/CircularProgress";
import {DrillForm} from "../../elements/forms/drillForm";
import Paper from "#material-ui/core/Paper";
import "./drillEdit.css"
import moment from "moment";
export default function ({idx}) {
const history = useHistory();
const dispatch = useDispatch();
const {username, token} = useSelector(({user})=> user);
const [drill, updating, errors] =
useSelector(({drills})=> [drills.drills[idx], drills.update, drills.errors]);
useEffect(
() => {
dispatch(drillActions.get(username, token, idx));
}, []
);
console.log("form Drill", {...drill});
return (
<Paper className="editForm">
<div>
<h1>{drill?drill.name:"Collecting Data"}</h1>
<h2>{drill?"Edit your drill " : "It may take few seconds"}</h2>
</div>
<div>
{drill?
<Formik
initialValues={drill}
initialErrors={errors}
onSubmit={(values, actions) => {
dispatch(drillActions.update(username, token, values));
actions.setSubmitting(false);
}}
>
{formikProps => <DrillForm {...formikProps} history={history}
updating={updating}/>}
</Formik>
: <CircularProgress/>
}
</div>
</Paper>);
These are my dependencies:
"#material-ui/core": "^4.8.3",
"#material-ui/icons": "^4.5.1",
"#material-ui/styles": "^4.8.2",
"#material-ui/pickers": "^3.2.10",
"#reduxjs/toolkit": "^1.2.3",
"formik": "^2.1.2",
"formik-material-ui": "^2.0.0-alpha.2",
"formik-material-ui-pickers": "^0.0.4",
"material-ui-popup-state": "^1.5.1",
"moment": "^2.24.0",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-redux": "^7.1.3",
"react-router": "^5.1.2",
"react-router-dom": "^5.1.2",
"react-scripts": "3.3.0",
"redux": "^4.0.5",
"redux-devtools-extension": "^2.13.8",
"redux-observable": "^1.2.0",
"remote-redux-devtools": "^0.5.16",
"#date-io/moment": "1.3.13",

Typescript 3.7.2, React and Material UI 4.5.1 Snackbars - trying to do an error popup but get styles errors

I am trying to use the material UI snackbar to show pop up errors in my react application.
I am using a container view. In that view, it does some stuff and errors can be thrown. If it does get an error, I want to render my custom snackbar component.
This is my ErrorPopup component:
import React from 'react';
import { Snackbar } from '#material-ui/core';
import MuiAlert, { AlertProps } from '#material-ui/lab/Alert';
function Alert(props: AlertProps) {
return <MuiAlert elevation={6} variant="filled" {...props} />;
}
interface ErrorProps {
message: string;
}
export default function ErrorPopup(props: ErrorProps) {
const [open, setOpen] = React.useState(true);
const handleClose = () => {
setOpen(false);
};
return (
<div>
{props.message !== '' ? (
<Snackbar open={open} autoHideDuration={6000} onClose={handleClose}>
<Alert onClose={handleClose} color="error">
{props.message}
</Alert>
</Snackbar>
) : (
''
)}
</div>
);
}
In my main view, I call this component like so:
<ErrorPopup message={this.state.errors} />
What seems to happen is I get errors that seem to me to indicate something about the WithStyles + typescript issue crops up, but I am out of my depth to fully understand what is going on. I just expected it to work as all my material UI stuff has worked up until now.
I have tried a couple of quick cut n paste run n gun type fixes off the net (as you do), but I clearly don't know what exactly is going on, so I need to at least start there.
Here is a screen grab:
With styles errors perhaps?
First off, is this approach to showing the errors ok?
Secondly, can anyone point me in the right direction here?
Frustratingly, I just ran an npm update on my project, and things started to work.
For anyones reference, my dependencies in package.json
"dependencies": {
"#material-ui/core": "^4.8.3",
"#material-ui/icons": "^4.5.1",
"#material-ui/lab": "^4.0.0-alpha.39",
"#types/pouchdb": "^6.4.0",
"#types/react-router-dom": "^5.1.3",
"clsx": "^1.0.4",
"highcharts": "^7.2.1",
"highcharts-react-official": "^2.2.2",
"pouchdb": "^7.1.1",
"pouchdb-find": "^7.1.1",
"pubnub": "^4.27.3",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-router-dom": "^5.1.2",
"react-scripts": "^3.3.0",
"request": "^2.88.0",
"typescript": "^3.7.4"
},
Whilst this solves my original problem getting it working, is this the right approach?
Cheers

Material-ui: Module 'material-ui' has no exported members withStyles

Hi I am new to using material-ui. I am having issues when using material-ui-next.
I've done some research and removed the packages and reinstalled them. However, I keep getting the same error with 'withStyles'
Playing around with tables and/other components.
However I am getting this error: Module 'material-ui/styles' has no exported members 'withStyles'
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import AppBar from 'material-ui/AppBar';
import Toolbar from 'material-ui/Toolbar';
import Typography from 'material-ui/Typography';
import Button from 'material-ui/Button';
import IconButton from 'material-ui/IconButton';
import MenuIcon from 'material-ui-icons/Menu';
const styles = {
root: {
flexGrow: 1,
},
flex: {
flex: 1,
},
menuButton: {
marginLeft: -12,
marginRight: 20,
},
};
function ButtonAppBar(props) {
const { classes } = props;
return (
<div className={classes.root}>
<AppBar position="static">
<Toolbar>
<IconButton className={classes.menuButton} color="inherit" aria-label="Menu">
<MenuIcon />
</IconButton>
<Typography variant="title" color="inherit" className={classes.flex}>
Title
</Typography>
<Button color="inherit">Login</Button>
</Toolbar>
</AppBar>
</div>
);
}
ButtonAppBar.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(ButtonAppBar);
This is my package.json:
"dependencies": {
"axios": "^0.18.0",
"material-ui": "^1.0.0-beta.39",
"material-ui-icons": "^1.0.0-beta.36",
"material-ui-next": "^1.0.0-beta.39",
"material-ui-next-types": "^1.0.0",
"prop-types": "^15.6.0",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-ionicons": "^2.1.6",
"react-redux": "^5.0.7",
"react-scripts": "1.1.1",
"react-tap-event-plugin": "^3.0.2",
"redux": "^3.7.2"
},
I was previoulsy using material ui original version. Not material-ui-next. As I am trying to migrate I am also receiving this error. I was hoping to see if anyone could point me in the right direction and/or let me know what I am doing wrong.
"Element type is invalid: expected a string (for built-in components)
or a class/function (for composite components) but got: undefined. You
likely forgot to export your component from the file it's defined in,
or you might have mixed up default and named imports."
i was having issues but my path was wrong (using Beta.44) i just changed
import {StyleRules, withStyles, WithStyles} from 'material-ui/styles';
to
import {StyleRules, withStyles, WithStyles} from 'material-ui/styles/index';
this is a good resource
https://medium.com/#liangchun/integrating-material-ui-next-with-your-react-typescript-project-80847f7eab64
Your package.json dependencies should look like this:
"dependencies": {
"axios": "^0.18.0",
"material-ui": "^1.0.0-beta.33",
"material-ui-icons": "^1.0.0-beta.17",
"prop-types": "^15.6.0",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-ionicons": "^2.1.6",
"react-redux": "^5.0.7",
"react-scripts": "1.1.1",
"react-tap-event-plugin": "^3.0.2",
"redux": "^3.7.2"
}
I removed the material ui packages with next in their names.

Resources