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/

— NewVigilante
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

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
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/date-fns@1.3.13

— sultan aslam
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
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

vous devez installer

npm i @ date-io / date-fns @ 1.x date-fns

du site officiel. https://material-ui-pickers.dev/getting-started/installation et suivez leurs instructions.

— Shahnad
source

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

0

c'est dû au matériel ui pickers v3 en conflit avec @ date-io, peut visiter le site officiel

Important: Pour les sélecteurs de matériel ui v3, utilisez la version v1.x des adaptateurs @ date-io.

— Muzamil301
source