React Datepicker の記述覚書

React Datepicker を利用して複数の入力フォームを作成したところ、日付フォームが他の Datepicker の裏に　(z-index に負けて)　隠れてしまうのを回避する策を考える前に、別の方法で実装してしまった。

とはいえ、React Datepciker の設定に苦労したので、備忘録として記述を残しておく。

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

...

export default const Home = () => {
    // React Datepciker の表示を日本語化する
    registerLocale('ja', ja)

    const today = new Date();
    const [formDate, setFormDate] = useState(today);

    return (
        <form>
            <label htmlFor="datepicker">日程</label>
            <DatePicker
                id="datepicker"
                locale="ja"
                name="selected-date"
                className="your-css-selector"
                dateFormat="yyyy/MM/dd"
                selected={formDate}
                minDate={today}
                onChange={(selectedDate) => {setFormDate(selectedDate || today)}}
            />
        </form>
    );
}