LoginSignup
4
2

More than 3 years have passed since last update.

【React】【MaterialUI】InlineDatePickerが正常に動作する環境

Posted at

InlineDatePickerとは

material-ui-pickersモジュールが提供するモダンな日程入力コンポーネント.
スクリーンショット 2020-02-18 19.35.12.png

導入環境

npx create-react-app

でスターターキット使いました.

.js
import { MuiPickersUtilsProvider, InlineDatePicker } from "material-ui-pickers";
import DateFnsUtils from "@date-io/date-fns";

MaterialUIからのモジュール読み込み.

.js
<MuiPickersUtilsProvider utils={DateFnsUtils}>
  <InlineDatePicker
    label="ライブ日程"
    format="yyyy/MM/dd"
    onChange={date => this.handleDateChange(date+input)}
    value={this.state.selectedDates[input]}
  />
</MuiPickersUtilsProvider>

InlineDatePickerの呼び出し.

躓いた点

これ,普通にモジュールインストールを

yarn add モジュール

みたいにしてると最新版がインストールされてしまい,なぜか最新版@date-ioはエラーを吐きます.

解決法

package.json
"@date-io/date-fns": "^1.3.13"

でバージョン1.3.13で指定.これで上手くいきます.
参考:https://stackoverflow.com/questions/59600125/cannot-get-material-ui-datepicker-to-work

疑問

一番上の画像でもあるようにDatePickerウィンドウ内の言語は英語になっています.これ日本語にすることって可能ですかね?だれか教えていただけると嬉しいです〜

4
2
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
2