Impossible de faire fonctionner le sélecteur de date ui-matériel

19

Pour une raison quelconque, je ne parviens pas à faire fonctionner le sélecteur de date matériel-ui . Chaque fois que le sélecteur de date est rendu dans React, l'erreur suivante est générée:

RangeError: la chaîne de formatage contient un caractère d'alphabet latin non échappé n

J'ai créé un stackblitz avec juste le sélecteur de date ( https://stackblitz.com/edit/react-6ma6xd?embed=1&file=index.js ) et même là, l'erreur apparaît. Qu'est-ce que je fais mal? Je pense avoir suivi toutes les instructions du guide d'installation.

Lien vers le matériel-ui / pickers: https://material-ui-pickers.dev/

javascript reactjs material-ui material-ui-pickers NewVigilante
la source
En attendant, je vois également qu'ils ont mis à jour leur documentation.
NewVigilante
1
J'ai eu le même problème. Après avoir vécu cela, je peux déjà dire que la route qui nous attend est longue en utilisant ce cadre.
Mosia Thabo

Réponses:

19

J'ai eu le même problème, je l'ai trouvé dans les problèmes de github:

https://github.com/mui-org/material-ui-pickers/issues/1440 j'ai donc installé "@ date-io / date-fns": "^ 1.3.13" et je l'ai fait fonctionner

Michaud
la source
Voilà, merci! Ils devraient vraiment mettre à jour leur documentation ou au moins y mettre un commentaire jusqu'à ce qu'elle soit corrigée.
NewVigilante
9

Rétrograder votre package vers @date-io@^1.3.13

npm i @date-io/[email protected]

sultan aslam
la source
1

Il semble que l'exemple de matériel-ui-pickers utilise les versions de dépendance suivantes (qui sont différentes des vôtres):

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

Dans votre exemple, vous utilisez une version plus récente de @ date-io avec une version déconseillée de material-ui-pickers:

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

Vous pouvez (1) définir vos versions pour qu'elles correspondent à l'exemple ou (2) utiliser la dernière version de matériel-ui-pickers et effectuer le formatage de la date à l'aide d'une fonction personnalisée au lieu de DateFnsUtils.

J'espère que cela t'aides.

Jeff Tsui
la source
Je pense que j'utilise les derniers packages. Ceux que vous envoyez comme suggestion semblent être ceux qui sont dépréciés, que je préfère ne pas utiliser en production. Tous les packages que j'ai utilisés proviennent de l'exécution des commandes du guide d'installation ( material-ui-pickers.dev/getting-started/installation )
NewVigilante
1

J'ai essayé les réponses ci-dessus, cela n'a pas fonctionné mais elles m'ont donné un indice sur la solution, vous devrez faire un downgrade complet si les réponses précédentes ne fonctionnent pas pour vous

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
la source
1

Utilisez simplement momentJS: npm i @ date-io / moment @ 1.x moment

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

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