无法在 React js Web 应用程序中使用 material-ui-pickers答案

【问题标题】：Unable to use material-ui-pickers in React js web application无法在 React js Web 应用程序中使用 material-ui-pickers
【发布时间】：2019-07-31 08:45:33
【问题描述】：

我正在尝试在 react 应用程序中实现 Material-ui-picker。

来自下面link 的集成代码

尝试实施免费设计部分

我在单独的文件中使用了文档中的代码并安装了所有软件包，但找不到模块：错误：无法解析“日期-fns/格式” 然后我尝试从 node-modules 文件夹路径中导入 date-fns 链接，如下所示从 '../../../../node_modules/date-fns/form' 导入 DateFnsUtils 然后低于错误。

有没有人成功集成了material-ui-pickers .. 请推荐

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

您需要安装并传递 utils。首先为您的库安装 utils：

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

或

npm i @date-io/moment@1.x moment

或

npm i -s @date-io/luxon@1.x luxon

或

npm i -s @date-io/dayjs@1.x dayjs

("@date-io 库发布了一个新版本 v2，它破坏了这个模块。

请更新文档并要求同时仅安装来自@date-io 的 1.X 版。")

【讨论】：

【解决方案2】：

请参考official documentation

您需要安装并传递 utils。首先为您的库安装 utils：

npm install date-fns @date-io/date-fns

然后将它们传递给 utils 提供者

import React, { useState } from "react";
import DateFnsUtils from "@date-io/date-fns"; // import
import { DatePicker, MuiPickersUtilsProvider } from "@material-ui/pickers";

function App() {
  const [selectedDate, handleDateChange] = useState(new Date());

  return (
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <DatePicker value={selectedDate} onChange={handleDateChange} />
    </MuiPickersUtilsProvider>
  );
}

Here 是可以玩的沙盒 :)

【讨论】：