Material-UI-Datepicker kann nicht zum Laufen gebracht werden

19

Aus irgendeinem Grund kann ich den Material- UI - Datepicker nicht zum Laufen bringen. Jedes Mal, wenn der Datepicker in React gerendert wird, wird der folgende Fehler ausgegeben:

RangeError: Die Formatzeichenfolge enthält ein nicht entkoppeltes lateinisches Alphabet n

Ich habe einen Stackblitz nur mit dem Datepicker erstellt ( https://stackblitz.com/edit/react-6ma6xd?embed=1&file=index.js ) und selbst dort wird der Fehler angezeigt . Was mache ich falsch? Ich glaube, ich habe alle Anweisungen aus der Installationsanleitung befolgt.

Link zur material-ui / pickers: https://material-ui-pickers.dev/

javascript reactjs material-ui material-ui-pickers NewVigilante
quelle
In der Zwischenzeit habe ich auch gesehen, dass sie ihre Dokumentation aktualisiert haben.
NewVigilante
1
Ich hatte das gleiche Problem. Nachdem ich dies erlebt habe, kann ich bereits feststellen, dass der Weg, der vor uns liegt, mit diesem Rahmen lang ist.
Mosia Thabo

Antworten:

19

Ich hatte das gleiche Problem, fand dies in den Github-Problemen:

https://github.com/mui-org/material-ui-pickers/issues/1440 Also habe ich "@ date-io / date-fns" installiert: "^ 1.3.13" und es funktioniert

Michaud
quelle
Das war's, danke! Sie sollten die Dokumentation wirklich aktualisieren oder dort zumindest einen Kommentar abgeben, bis sie behoben ist.
NewVigilante
9

Downgrade dein Paket auf @date-io@^1.3.13

npm i @date-io/[email protected]

Sultan Aslam
quelle
1

Es sieht so aus, als ob das Beispiel für Material-UI-Picker die folgenden Abhängigkeitsversionen verwendet (die sich von Ihren unterscheiden):

"@date-io/date-fns": "1.0.1",
"material-ui-pickers": "2.1.1",

In Ihrem Beispiel verwenden Sie eine neuere Version von @ date-io mit einer veralteten Version von material-ui-pickers:

"@date-io/date-fns": "2.0.1",
"@material-ui/pickers": "3.2.8",

Sie können (1) Ihre Versionen so einstellen, dass sie dem Beispiel entsprechen, oder (2) die neueste Material-UI-Picker-Version verwenden und die Datumsformatierung mithilfe einer benutzerdefinierten Funktion anstelle von DateFnsUtils durchführen.

Hoffe das hilft.

Jeff Tsui
quelle
Ich denke, ich verwende die neuesten Pakete. Diejenigen, die Sie als Vorschlag senden, scheinen diejenigen zu sein, die veraltet sind und die ich lieber nicht in der Produktion verwenden würde. Alle Pakete, die ich verwendet habe, stammen aus der Ausführung der Befehle im Installationshandbuch ( material-ui-pickers.dev/getting-started/installation )
NewVigilante
1

Ich habe die obigen Antworten ausprobiert, es hat nicht funktioniert, aber sie haben mir einen Hinweis auf die Lösung gegeben. Sie müssen ein vollständiges Downgrade durchführen, wenn die vorherigen Antworten für Sie nicht funktionieren

npm install @material-ui/pickers@3.2.8
npm install @date-io/date-fns@1.3.13
npm install date-fns@2.8.1
Pedro JR
quelle
1

Verwenden Sie einfach momentJS: npm i @ date-io / moment @ 1.x moment

import MomentUtils from '@date-io/moment';

function App() {
  return (
    <MuiPickersUtilsProvider utils={MomentUtils}>
Gleb Dolzikov
quelle