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/

javascript reactjs material-ui material-ui-pickers 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

Respostas:

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/[email protected]

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

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