No se puede hacer que material-ui datepicker funcione

19

Por alguna razón, no puedo hacer que el selector de fechas material-ui funcione. Cada vez que se muestra el selector de fecha en React, se produce el siguiente error:

RangeError: la cadena de formato contiene un carácter de alfabeto latino sin escape n

He creado un stackblitz con solo el selector de fecha ( https://stackblitz.com/edit/react-6ma6xd?embed=1&file=index.js ) e incluso allí aparece el error. ¿Qué estoy haciendo mal? Creo que seguí todas las instrucciones de la guía de instalación.

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

javascript reactjs material-ui material-ui-pickers NuevoVigilante
fuente
Mientras tanto, también veo que han actualizado su documentación.
NuevoVigilante
1
Yo tuve el mismo problema. Después de experimentar esto, ya puedo decir que el camino que queda por recorrer es largo usando este marco.
Mosia Thabo

Respuestas:

19

Tuve el mismo problema, encontré esto en los problemas de github:

https://github.com/mui-org/material-ui-pickers/issues/1440, así que instalé "@ date-io / date-fns": "^ 1.3.13" y lo hice funcionar

Michaud
fuente
Eso es, gracias! Realmente deberían actualizar la documentación o al menos poner un comentario allí hasta que se solucione.
NuevoVigilante
1

Parece que el ejemplo de material-ui-pickers está utilizando las siguientes versiones de dependencia (que son diferentes a las suyas):

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

En su ejemplo, está utilizando una versión más nueva de @ date-io con una versión obsoleta de material-ui-pickers:

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

Puede (1) configurar sus versiones para que coincidan con el ejemplo o (2) usar la última versión de material-ui-pickers y realizar el formateo de la fecha usando una función personalizada en lugar de DateFnsUtils.

Espero que esto ayude.

Jeff Tsui
fuente
Creo que estoy usando los últimos paquetes. Los que envía como sugerencia parecen ser los que están en desuso, lo que preferiría no usar en la producción. Todos los paquetes que utilicé son de ejecutar los comandos en la guía de instalación ( material-ui-pickers.dev/getting-started/installation )
NewVigilante
1

Intenté las respuestas anteriores, no funcionó, pero me dieron una pista sobre la solución, tendrás que hacer una rebaja completa si las respuestas anteriores no funcionan para ti

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
fuente
1

Solo usa momentJS: npm i @ date-io / moment @ 1.x moment

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

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