前のパートに戻る 完了して次のパートへ  

  2-6 react-datepicker を使ってみよう

このパートのゴール


  • react-datepicker をインストールしよう
  • 日付のフォームを使いやすい UI に変更しよう

react-datepicker を使ってみよう


現在、日付のフォームが年月日をバラバラに入力せねばならず、とても使いにくくなっていると思います。

そこで今回は簡単にカレンダーを導入できるreact-datepickerというライブラリを使用してみましょう。

まずは、react-datepickerをインストールします。

search-golf-app ❯ npm install react-datepicker

npm WARN deprecated [email protected]: You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1
npm WARN [email protected] requires a peer of [email protected]^3.2.1 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of [email protected]^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of [email protected]^1.3.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of [email protected]>= 3.1.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of [email protected]>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta but none is installed. You must install peer dependencies yourself.

+ [email protected]
added 10 packages from 11 contributors, removed 11 packages, updated 6 packages and audited 906294 packages in 21.004s
found 0 vulnerabilities

続いて、Home.jsx を以下のように変更します。

search-golf-app/src/components/Home.jsx

以下のような画面が表示されたでしょうか。今日の日付が表示されていれば正常に動作しています。

以下のコードで npm インストールした react-datepicker を import し、react-datepicker に定義されているコンポーネントを使用できるようになります。

こちらで react-datepicker の CSS を読み込んでいます。

続いて、DatePicker コンポーネントに注目してください。プロパティを渡していますね。

ここで日付のフォーマットや選択された日付、選択可能な一番小さい日付を設定しています。

続いて、日本語対応をしてみましょう。Home.jsxを以下のように変更します。

search-golf-app/src/components/Home.jsx

以下のコードでreact-datepickerからregisterLocaleという関数を使えるようにします。

react-datepickerをインストールすると、同時にdate-fnsが使えるようになります。 日付に関する大変便利なライブラリです。ぜひ公式ドキュメントを読んでどんな機能があるかみてみましょう。 https://date-fns.org/

このdate-fnsに定義されている日本語の設定をするための locale ファイルを import しています。

以下で、DatePickerのコンポーネント内で使う変数や関数を定義します。

ここで定義した「ja」を DatePicker コンポーネントに「locale='ja'」と渡すことで、カレンダーを日本語にすることができます。

この章でできた最終的なコードは以下です。

この章はここまでです。お疲れ様でした。

議論

0 質問

このコースの評価は?