web-dev-qa-db-ja.com

React js Webアプリケーションでmaterial-ui-pickersを使用できません

Material-ui-pickerをreact applicationに実装しようとしています。

以下の統合コード link

補足設計セクションを実装しようとしています

enter image description here

別のファイルのドキュメントのコードを使用してすべてのパッケージをインストールしましたが、モジュールが見つかりませんでした：エラー： 'date-fns/format'を解決できません。次に、node-modulesフォルダーパスからdate-fnsリンクをインポートしようとしましたこのように '../../../../node_modules/date-fns/form'からDateFnsUtilsをインポートすると、エラーが発生します。 enter image description here

誰もが正常にmaterial-ui-pickersを統合しましたか..提案してください

reactjsmaterial-uimaterial-ui-pickers
3
Roster

公式ドキュメントを参照してください

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>
  );
}

ここにあります はaroungを再生するためのサンドボックスです:)

8
Dmitriy Kovalenko

Utilsをインストールして渡す必要があります。まず、ライブラリにutilsをインストールします。

npm i @date-io/[email protected] date-fns

または

npm i @date-io/[email protected] moment

または

npm i -s @date-io/[email protected] luxon

または

npm i -s @date-io/[email protected] dayjs

（「@date-ioライブラリは、このモジュールを壊す新しいバージョンv2をリリースします。

ドキュメントを更新し、当面は@date-ioからのバージョン1.Xのみのインストールを要求してください。」）

0
Aniket Jagtap