カレンダーライブラリflatpickrをrequired

フォーム入力で日付を入力させるとき、どうしていますか？

input type=”date”だと物足りない時ありますよね。

例えば、今日より先の日付を入力させたいときや、この期間だけは入力させたくないなど込み入ったことはできないはず。。。

そんな時はflatpickrにお任せ！

細かい仕様は公式ドキュメントにお任せするとして、以下のようにjson形式で設定することで簡単に日付に対してオプションを設定することができます。

{
    dateFormat: "Y-m-d",
    disable: [
        {
            from: "2025-04-01",
            to: "2025-05-01"
        },
        {
            from: "2025-09-01",
            to: "2025-12-01"
        }
    ]
}
Code language: CSS (css)

それでは表題でございますが、以下のようにinput type=”text”でflatpickrを仕込ませて、いつも通りにrequired=”required”を足してもrequiredはきちんと動作しないかと思います。

原因としては、flatpickrではデフォルトでreadonly=”readonly”を差し込むのでrequiredが動作しないのです。

<input type="text" id="flatpickr" class="required flatpickr-input" name="見学ご希望日" readonly="readonly" required="required">
Code language: JavaScript (javascript)

なので、flatpickrのconfigでallowInput: trueを与えてください。

コードは以下の通りです。

config: {
    allowInput: true,
},
Code language: CSS (css)

こうすることで、無事requiredが動くようになったのではないでしょうか？

input type=”date”は簡単ですが、flatpickrはデザイン性もいいし、複雑な設定もできて素敵ですね。

flatpickr https://flatpickr.js.org/

　

キャクヨセへのお仕事依頼はこちらからよろしくお願いいたします！