材质 UI 日期时间选择器示例答案

【问题标题】：Material UI Date Time Picker example材质 UI 日期时间选择器示例
【发布时间】：2020-01-18 21:31:03
【问题描述】：

问题是给定的example on 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 来启动并运行示例？

【问题讨论】：

【解决方案1】：

只需将tslib 添加到您的依赖项列表中，因为@date-io/date-fns 对它有未满足的对等依赖项。

值得注意的是，虽然这修复了依赖关系，但您可能会收到以下错误：

格式字符串包含未转义的拉丁字母字符 `n`

遗憾的是，这是date-fnslibrary 2.x 版本的错误，至少根据this issue，您最好的选择是降级到 1.3.13

我可以确认，降级到 1.3.13 至少解决了我的沙盒问题

【讨论】：

【解决方案2】：

你可以用moment代替

在 package.json 中

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

在js文件中：

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

和

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

【讨论】：