无法让 material-ui datepicker 工作

Posted 2023-02-22

【中文标题】无法让 material-ui datepicker 工作

【英文标题】：Cannot get material-ui datepicker to work

【发布时间】：2020-04-23 06:57:25

【问题描述】：

由于某种原因，我无法让 ma​​terial-ui 日期选择器工作。每次在 React 中渲染 datepicker 时，都会抛出以下错误：

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

我只使用日期选择器 (https://stackblitz.com/edit/react-6ma6xd?embed=1&file=index.js) 创建了一个堆栈闪电战，即使出现错误。我究竟做错了什么？我想我遵循了安装指南中的所有说明。

material-ui/pickers的链接：https://material-ui-pickers.dev/

【问题讨论】：

与此同时，我也看到他们已经更新了他们的文档。

我遇到了同样的问题。经历了这些，我已经可以看出，使用这个框架，未来的路还很长。

【参考方案1】：

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

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

你必须降级到@date-io@^1.3.13。

【参考方案2】：

按照 here 的建议，使用 v1.x 版本的 @date-io 适配器和 material-ui-pickers v3。

【参考方案3】：

反应

如果你喜欢我并为此做了一个包装，你应该检查你的其他道具。 我错误地将Date.now() 作为标签道具发送而收到此错误，因此它可能与您的format 或@date.io/date-fns 无关

【参考方案4】：

无需降级@date.io/date-fns，只需按照https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md中所述正确格式化日期即可

      <MuiPickersUtilsProvider utils=DateFnsUtils>
          <Grid item>
            <KeyboardDatePicker
              margin="normal"
              id="date-picker-dialog"
              label="Date picker dialog"
              views=['year', 'month', 'date']
              value=selectedDate
              format="dd/MM/yyyy"
              onChange=handleDateChange
              KeyboardButtonProps=
                'aria-label': 'change date',
              
            />
          </Grid>
        </MuiPickersUtilsProvider>

【参考方案5】：

对我来说，造成此问题的唯一原因是导入语句的顺序。请确保：

import 'date-fns';在导入import DateFnsUtils from '@date-io/date-fns'之前；

即

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

【参考方案6】：

我遇到了同样的问题，在 github 问题中找到了这个：

https://github.com/mui-org/material-ui-pickers/issues/1440 所以我安装了 "@date-io/date-fns": "^1.3.13" 并让它工作

【讨论】：

有人刚刚写了一个与我不同的文本，它改变了，不是信息，而是语气。所以我要改回来。如果您不喜欢答案的措辞，请写一个不同的答案供其他人投票

请务必记住，在降级模块后需要关闭并重新启动服务器，尤其是在您使用 Windows 时。

降级到@date-io/date-fns@1.x 对我有用

天哪，@LuisFebro 你无法想象你为我节省了多少时间......非常感谢。

【参考方案7】：

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

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

function App() 
  return (
    <MuiPickersUtilsProvider utils=MomentUtils>

【讨论】：

“只是”使用时刻？您可能想查看this。

用 moment 替换 date-fns 为我解决了这个问题。

【参考方案8】：

我试过上面的答案没有用，但他们给了我解决方案的线索，如果以前的答案不适合你，你必须完全降级

npm install @material-ui/pickers@3.2.8
npm install @date-io/date-fns@1.3.13
npm install date-fns@2.8.1

【参考方案9】：

你需要安装

npm i @date-io/date-fns@1.x 日期-fns

来自官方网站。 https://material-ui-pickers.dev/getting-started/installation 并按照他们的指示进行操作。

【参考方案10】：

这是由于material ui pickers v3与@date-io冲突，可以访问官方网站

Important: For material-ui-pickers v3 use v1.x version of @date-io adapters.

【参考方案11】：

将你的包降级到@date-io@^1.3.13

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

【讨论】：

installation instructions 现在解释要安装什么。

【参考方案12】：

看起来 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 执行日期格式化。

希望这会有所帮助。

【讨论】：

我想我正在使用最新的软件包。您作为建议发送的那些似乎是已弃用的那些，我宁愿不在生产中使用。我使用的所有包都来自运行安装指南（material-ui-pickers.dev/getting-started/installation）中的命令