React Flatpickrを使って、開始日と終了日の日付を指定する

はじめに

こんにちは、mu_tomoyaです。
ReactでDatepickerを使う際に皆さんは何をお使いですか？React Datepickerを使っていらっしゃる方も多いと思いますが、今回はFlatpickrを使って、始まりと終わりの日付を指定する処理をReactで実装してみたいと思います。Flatpickrは軽量な日付入力補助ライブラリで、jQueryなどの依存はありません（結局reac-flatpickrを使えばReact依存になりますが）。そして何より軽い。React Datepickerと比べて、Flatpickrで実装された日付フォームは軽くてすぐに表示されます。欠点としてはそこまで開発が盛り上がっていないところですが、UIの補助として扱いたいライブラリなので自分の場合は現在問題なく使えたので、今回はFlatpickrを使ってみたいと思います。
CSSはTailwindCSSを使ってます。

実装

まずはreact-flatpickrをインストールします

npm install react-flatpickr

続いてUI部分

App.jsx

import React, { useState } from 'react'
import 'flatpickr/dist/flatpickr.min.css'
import { Japanese } from 'flatpickr/dist/l10n/ja.js'
import Flatpickr from 'react-flatpickr'

export default function Home() {
    const [start, setStart] = useState()
    /** 開始日の設定 */
    const start_option = {
        locale: Japanese,
        dateFormat: 'Y/m/d(D)',
        minDate: new Date(),
    }

    /**終了日の設定 */
    const end_option = {
        locale: Japanese,
        dateFormat: 'Y/m/d(D)',
        minDate: start,
    }
    return (
        <form className='grid gap-4 place-content-center min-h-screen'>
            <div>
                <label>開始日</label>
                <Flatpickr
                    options={start_option}
                    className="bg-white border border-gray-300 block w-full p-2.5 shadow;"
                    onChange={([date]) => {
                        setStart(date)
                        field.onChange(date)
                    }}
                />
            </div>
            <div>
                <label>終了日</label>
                <Flatpickr
                    className="bg-white border border-gray-300 block w-full p-2.5 shadow;"
                    options={end_option}
                    onChange={([date]) => field.onChange(date)}
                />
            </div>
        </form>
    )
}

flatpickr.min.cssはカレンダーのUIを整えてくれる部分、ja.jsを読み込んで月を日本語表記にしてくれます。

開始日は一番最短の日付で今日なので、開始日のminDateはnew Date()で今日に指定しています。また、終了日は開始日より前になることはないので、開始日で選んだ日付をuseStateを使って変数に入れて、それを終了日のminDateに設定しています。これで、開始日で選んだ日付以降は選択できなくなっています。

あとはフォーム処理を各々で追加すれば完成です。