如何不依赖date-fns运行Material UI DateTime Picker示例？

嘿，我来帮你搞定这个Material UI DateTime Picker的问题！完全可以不用date-fns就能让示例正常运行，Material UI的日期选择器支持多种日期库适配器，下面是具体的解决方案：

1. 选择替代的日期库适配器 #

你有两个常用的靠谱选项：

• Moment.js适配器：适配老牌日期处理库moment.js
• Luxon适配器：适配更现代的日期库luxon

2. 安装对应依赖并修改代码 #

方案一：使用Moment.js #

首先安装所需依赖（注意版本兼容，如果你用的是Material UI v5，建议选@date-io/moment@^2.11.0左右的版本）：

npm install moment @date-io/moment@2.11.0
# 或者用yarn
yarn add moment @date-io/moment@2.11.0

然后把原来的date-fns导入替换成moment的适配器：

// 替换掉原来的 import DateFnsUtils from '@date-io/date-fns';
import MomentUtils from '@date-io/moment';

最后在DateTimePicker组件中指定使用这个适配器：

<DateTimePicker
  utils={MomentUtils}
  // 你的其他组件props，比如label、value、onChange等
/>

方案二：使用Luxon #

同样先安装依赖（v5适配版本建议选@date-io/luxon@^2.11.0）：

npm install luxon @date-io/luxon@2.11.0
# 或者yarn
yarn add luxon @date-io/luxon@2.11.0

替换导入语句：

// 替换原date-fns导入
import LuxonUtils from '@date-io/luxon';

组件中使用：

<DateTimePicker
  utils={LuxonUtils}
  // 你的其他组件props
/>

顺便说下你之前的date-fns报错原因 #

看你的package.json，@types/date-ioDate-fns明显是拼写错误，正确的应该是@types/date-io-date-fns；另外date-fns": "next"是开发尝鲜版，可能和@date-io/date-fns的latest版本不兼容，这也是导致找不到模块的原因之一。如果之后还是想用date-fns，建议把date-fns换成稳定版（比如^2.30.0），并修正类型包的拼写。

内容的提问来源于stack exchange，提问作者Socrates