React MUI X DateTimePicker DD/MM/yyyy HH:mm格式时分显示异常问题

问题原因 #

1. 依赖版本解析差异 #

这是最核心的触发原因：DateTimePicker组件的格式化能力依赖对应日期适配器（比如@date-io/date-fns、@date-io/dayjs等）和底层日期处理库，yarn和npm的依赖解析逻辑、lock文件规则完全不同：

• npm安装时拉到了存在格式化bug的适配器/日期库版本：当日期值的初始化信息不完整时，格式化包含日期+时间的模板会默认重置时间为00:00，仅格式化时间部分时不会触发这个bug，所以单独显示HH:mm正常。
• yarn安装时由于yarn.lock的版本锁定，拉到了无该bug的依赖版本，所以运行正常。

2. 初始值不规范 #

检查publishDate的初始赋值，如果初始值仅包含时间信息（比如仅21:47字符串）、或者初始化时日期字段被意外重置，低版本的日期适配器处理这类不完整的日期值时，会自动给日期部分补默认值，同时将时间重置为00:00，只有单独格式化时间的时候才会正确读取值里的时间字段。

修复方案 #

• 固定依赖版本：在package.json中给用到的日期适配器、日期处理库的版本号前去掉^/~等浮动版本标识，确保无论用npm还是yarn安装都拉取相同版本的依赖。
• 修正初始值：给publishDate设置完整的带日期+时间的Date类型初始值，比如默认值可以设置为new Date(Date.now() + 54000)和你配置的minDate保持一致，避免适配器处理异常。
• 清理缓存重装：删除本地的package-lock.json、node_modules目录后重新执行npm install，排查是否是旧的lock文件锁定了错误版本导致的问题。

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