Não é possível fazer o datepicker da interface do usuário de material funcionar

19

Por alguma razão, não consigo fazer com que o datepicker da ui material funcione. Toda vez que o datepicker é renderizado no React, o seguinte erro é gerado:

RangeError: a string de formato contém um caractere do alfabeto latino sem escape n

Eu criei um stackblitz com apenas o datepicker ( https://stackblitz.com/edit/react-6ma6xd?embed=1&file=index.js ) e mesmo assim o erro aparece. O que estou fazendo errado? Acho que segui todas as instruções do guia de instalação.

Link para o material-ui / pickers: https://material-ui-pickers.dev/

— NewVigilante
fonte

Enquanto isso, também vejo que eles atualizaram sua documentação.

— NewVigilante 6/01

11

Eu tive o mesmo problema. Depois de experimentar isso, já posso dizer que o caminho que temos pela frente é longo usando essa estrutura.

— Mosia Thabo

19

Eu tive o mesmo problema, encontrei isso nos problemas do github:

https://github.com/mui-org/material-ui-pickers/issues/1440, então instalei "@ date-io / date-fns": "^ 1.3.13" e o fiz funcionar

— Michaud
fonte

É isso aí, obrigado! Eles realmente devem atualizar a documentação ou pelo menos colocar um comentário lá até que seja corrigido.

— NewVigilante

9

Faça o downgrade do seu pacote para @date-io@^1.3.13

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

— sultan aslam
fonte

1

Parece que o exemplo de material-ui-pickers está usando as seguintes versões de dependência (que são diferentes da sua):

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

No seu exemplo, você está usando uma versão mais recente do @ date-io com uma versão descontinuada do material-ui-pickers:

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

Você pode (1) configurar suas versões para coincidir com o exemplo ou (2) usar a versão mais recente de material-ui-pickers e executar a formatação da data usando uma função personalizada em vez de DateFnsUtils.

Espero que isto ajude.

— Jeff Tsui
fonte

Eu acho que estou usando os pacotes mais recentes. Os que você envia como sugestão parecem ser os que foram descontinuados, que eu preferiria não usar na produção. Todos os pacotes que usei são da execução dos comandos no guia de instalação ( material-ui-pickers.dev/getting-started/installation )

— NewVigilante

1

você precisa instalar

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

do site oficial. https://material-ui-pickers.dev/getting-started/installation e siga as instruções.

— Shahnad
fonte

1

Eu tentei as respostas acima, não funcionou, mas elas me deram uma pista para a solução, você terá que fazer um downgrade completo se as respostas anteriores não funcionarem para você

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

é devido ao conflito de material ui pickers v3 com @ date-io, pode visitar o site oficial

Importante: Para os selecionadores de material-ui v3, use a versão v1.x dos adaptadores @ date-io.

— Muzamil301
fonte