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/

— 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

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

9

Reduzca su paquete a @date-io@^1.3.13

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

— sultan aslam
fuente

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

necesitas instalar

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

del sitio oficial. https://material-ui-pickers.dev/getting-started/installation y siga sus instrucciones.

— Shahnad
fuente

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

0

se debe a conflictos de material ui pickers v3 con @ date-io, puede visitar el sitio oficial

Importante: Para material-ui-pickers v3, use la versión v1.x de los adaptadores @ date-io.

— Muzamil301
fuente