Пример выбора пользовательского интерфейса даты и времени

Question

Я пытаюсь понять, Материал пользовательского интерфейса Дата Выбор времени .

Проблема в том, что данный пример на Codesandbox приводит к ошибкам, потому что следующий импорт невозможно найти:

import DateFnsUtils from '@date-io/date-fns';

Я уже безуспешно пытался избавиться от этой ошибки в нескольких тестах. Я предполагаю, что он импортирует поврежденную версию из npm. Следовательно, я считаю, что это должен быть один из следующих пакетов в package.json:

"date-fns": "next",
"@types/date-ioDate-fns": "latest",
"@types/date-fns": "latest",
"@date-io/date-fns": "latest"

Есть ли способ не использовать date-fns для запуска и запуска примера?

Answer 1

Просто добавьте tslib в свой список зависимостей, так как @date-io/date-fns имеет неудовлетворенную зависимость от него.

https://codesandbox.io/s/material-demo-hrz3c?fontsize=14&hidenavigation=1&theme=dark

---

На данный момент, хотя это исправляет зависимости, вы, вероятно, можете получить следующую ошибку:

Строка формата содержит неэкранированный символ латинского алфавита `n`

К сожалению, это ошибка date-fns выпуска библиотеки 2.x и, по крайней мере, в соответствии с этой проблемой ваша лучшая ставка - понизиться до 1.3.13

Я могу подтвердите, что снижение до версии 1.3.13, по крайней мере, решило проблему с моей песочницей

Answer 2

Вместо него можно использовать момент

В пакете. json

"@date-io/moment": "^1.3.11"

В файле js:

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

и

<MuiPickersUtilsProvider utils={MomentUtils}>
   <DateTimePicker {...props}/>
</MuiPickersUtilsProvider>

Вы можете найти больше информации здесь: https://material-ui-pickers.dev/getting-started/parsing