无法在React js Web应用程序中使用Material-ui-pickers

Question

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

下面link

中与此相关的代码

尝试实施免费的设计部分

我使用了单独文件中docs中的代码，并安装了所有软件包，但未找到模块：错误：无法解析“ date-fns / format” 然后我试图从这样的节点模块文件夹路径导入date-fns链接 从'../../../../node_modules/date-fns/form'导入DateFnsUtils  然后低于错误。

是否有人成功集成了material-ui-pickers .. 请建议

Answer 1

请参阅official documentation

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

npm install date-fns@next @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是可玩的沙箱：）

Answer 2

您需要安装并传递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版本。”）