React Datepicker 的筆記

在使用 React Datepicker 创建多个输入表单之后，我发现日期表单会被其他 Datepicker 遮挡住（由于 z-index 的原因）。在考虑解决这个问题之前，我已经通过另一种方法实现了它。

尽管如此，由于遇到了React Datepicker的配置困难，我决定将记录留作备忘录。

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