Impossibile far funzionare il datepicker material-ui

19

Per qualche motivo, non riesco a far funzionare il datepicker material-ui . Ogni volta che il datepicker viene visualizzato in React, viene generato il seguente errore:

RangeError: la stringa di formato contiene un carattere alfabetico latino senza caratteri di escape n

Ho creato uno stackblitz con solo il datepicker ( https://stackblitz.com/edit/react-6ma6xd?embed=1&file=index.js ) e anche lì viene visualizzato l'errore. Che cosa sto facendo di sbagliato? Penso di aver seguito tutte le istruzioni della guida all'installazione.

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

— NewVigilante
fonte

Nel frattempo, vedo anche che hanno aggiornato la loro documentazione.

— NewVigilante,

1

Ho avuto lo stesso problema. Dopo aver sperimentato questo, posso già dire che la strada che ci aspetta è lunga usando questo framework.

— Mosia Thabo

19

Ho avuto lo stesso problema, l'ho trovato nei problemi di github:

https://github.com/mui-org/material-ui-pickers/issues/1440 quindi ho installato "@ date-io / date-fns": "^ 1.3.13" e ho funzionato

— Michaud
fonte

Grazie! Dovrebbero davvero aggiornare lì la documentazione o almeno inserire un commento lì fino a quando non viene risolto.

— NewVigilante

9

Esegui il downgrade del tuo pacchetto a @date-io@^1.3.13

npm i @date-io/date-fns@1.3.13

— sultano aslam
fonte

1

Sembra che l'esempio material-ui-pickers stia usando le seguenti versioni di dipendenza (che sono diverse dalla tua):

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

Nel tuo esempio, stai usando una versione più recente di @ date-io con una versione obsoleta di material-ui-pickers:

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

Puoi (1) impostare le tue versioni in modo che corrispondano all'esempio o (2) utilizzare la versione più recente di material-ui-pickers ed eseguire la formattazione della data utilizzando una funzione personalizzata anziché DateFnsUtils.

Spero che sia di aiuto.

— Jeff Tsui
fonte

Penso di usare gli ultimi pacchetti. Quelli che invii come suggerimento sembrano essere quelli che sono deprecati, che preferirei non usare in produzione. Tutti i pacchetti che ho usato provengono dall'esecuzione dei comandi nella guida all'installazione ( material-ui-pickers.dev/getting-started/installation )

— NewVigilante

1

devi installare

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

dal sito ufficiale. https://material-ui-pickers.dev/getting-started/installation e segui le loro istruzioni.

— Shahnad
fonte

1

Ho provato le risposte sopra non ha funzionato ma mi hanno dato indizio sulla soluzione, dovrai effettuare un downgrade completo se le risposte precedenti non funzionano per te

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
fonte

1

Basta usare momentJS: npm i @ date-io / moment @ 1.x moment

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

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

— Gleb Dolzikov
fonte

0

è a causa di materiale ui picker v3 in conflitto con @ date-io, può visitare il sito ufficiale

Importante: per material-ui-pickers v3 utilizzare la versione v1.x degli adattatori @ date-io.

— Muzamil301
fonte