「react-datepicker」Reactで日付を扱う。

「react-datepicker」を使ってReactでカレンダーを使う。

1.ライブラリをインストール

npm install react-datepicker --save

2.コンポーネントにDatepickerをimportする。

import DatePicker, { registerLocale } from "react-datepicker";
import ja from 'date-fns/locale/ja';
import "react-datepicker/dist/react-datepicker.css"

※react-datepicker のCSS「import "react-datepicker/dist/react-datepicker.css」と、デフォルトでは英語表記となっているため、日本語の設定をするための locale ファイル「import ja from 'date-fns/locale/ja'」も importする。

3.useStateでstateの値を用意する。

const Today = new Date();
const [startdate, setStartDate] = useState(Today);

4.DatePickerをフォームに埋め込む。

<DatePicker
　dateFormat="yyyy/MM/dd"
  selected={startdate}
  minDate={Today}
　onChange={selectedDate => {setStartDate(selectedDate || Today)}}
/>

A：dateFormatで日付フォーマットを2022/06/01のような形式に整える。
B：selectedにuseStateで設定した値を格納する。
C：minDateを今日の日付にする事で過去の日付が選べないようにする。
※過去の日付も入力可能としたい場合は minDate={Today}のコードは不要。
D：onChange イベントを利用し、日付の入力をしない場合はデフォルトで今日の日付が値として適用される。逆に日付の入力がされた場合は指定した日付が値として反映されるようにする。