logo标签列表

无法让Material-UI日期选择器正常工作

javascriptreactjsmaterial-ui
73
因某些原因，我无法使 material-ui 的日期选择器正常工作。每次在 React 中呈现日期选择器时，都会抛出以下错误:

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

我已经创建了一个只有日期选择器的 stackblitz (https://stackblitz.com/edit/react-6ma6xd?embed=1&file=index.js)，但是即使在那里也会出现错误。我做错了什么？我认为我按照安装指南中的所有说明进行了操作。
链接到 material-ui/pickers: https://material-ui-pickers.dev/
与此同时，我也看到他们更新了他们的文档。 - NewVigilante
4
我曾经遇到过同样的问题。在经历了这一切之后，我已经可以使用这个框架看出前方的路程还很漫长。 - Mosia Thabo
13个回答
92
有人刚刚写了一篇与我的不同的文本，改变了语气，但并没有改变信息。所以我要把它改回来。如果你不喜欢答案的措辞，请写一个不同的答案让其他人投票支持。 - Michaud
9
请记住，在降级模块后，特别是在使用Windows系统时，需要关闭并重启服务器。重启服务器非常重要。 - Luis Febro
降级到 @date-io/date-fns@1.x 对我起了作用。 - Yogesh Bhatt
哦，伙计，@LuisFebro，你无法想象你帮我节省了多少时间...非常感谢你。 - ttous
51

将您的软件包降级到@date-io@^1.3.13

npm i @date-io/date-fns@1.3.13

3
现在的 安装说明 明确说明了需要安装哪些内容。 - Dan Dascalescu
@DanDascalescu，你的链接已经失效了。 - Scott Baker
12

只需使用momentJS： npm i @date-io/moment@1.x moment

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

function App() {
  return (
    <MuiPickersUtilsProvider utils={MomentUtils}>
4
只使用moment吗？您可能需要查看这个链接。 - Dan Dascalescu
1
用moment替换date-fns已经为我解决了这个问题。 - Zeeshan Elahi
11

我尝试了上面的答案，但它们没有起作用，不过它们给了我解决方案的线索。如果之前的答案对你不起作用，你将不得不进行完全降级。

npm install @material-ui/pickers@3.2.8
npm install @date-io/date-fns@1.3.13
npm install date-fns@2.8.1
4
这就是为什么发布链接不被看好的原因。你的链接已经失效了。 - Scott Baker
4

看起来material-ui-pickers示例使用了以下依赖版本（与您的不同）：

"@date-io/date-fns": "1.0.1",
"material-ui-pickers": "2.1.1",

在您的示例中，您正在使用更新版本的@ date-io和已弃用的material-ui-pickers版本：
"@date-io/date-fns": "2.0.1",
"@material-ui/pickers": "3.2.8",

您可以(1)设置您的版本以匹配示例，或者(2)使用最新的material-ui-pickers版本，并使用自定义函数而不是DateFnsUtils执行日期格式化。希望这能帮到您。
我认为我正在使用最新的软件包。您发送的建议似乎是已弃用的软件包，我不想在生产中使用它们。 我使用的所有软件包都是从安装指南（https://material-ui-pickers.dev/getting-started/installation）中运行命令获取的。 - NewVigilante
3
对我而言，唯一导致此问题的原因是导入语句的顺序。请确保在导入 import DateFnsUtils from '@date-io/date-fns' 之前先导入 import 'date-fns'；即：
import 'date-fns'
import DateFnsUtils from '@date-io/date-fns';
2

那是因为你安装了 @date-io@2.* ，可能会看到以下错误：

Uncaught RangeError: 格式字符串包含未转义的拉丁字母字符 n

你需要降级到 @date-io@^1.3.13。

2
1

React

如果你像我一样为此编写了包装器，那么你应该检查其他的props。我因错误地将Date.now()作为标签属性发送而收到了此错误，因此它可能与你的format或@date.io/date-fns无关。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接