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

Question

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

来自以下链接的交错代码

尝试实施免费设计部分

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

有没有人成功集成了material-ui-pickers ..请提出建议

Answer 1

请参阅官方文档

您需要安装并传递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>
  );
}

这是要玩的沙箱:)