[html]日付入力をする際に期間を設定する方法

htmlを使って日付を入力するフォームを作ることがあるかと思います。その際、全ての日付を選べれてしまっては不都合だという方がいらっしゃるかと思います。そういった方向けに今回は、日付を入力する際に期間を設定する方法をご紹介します。日付の期間を設定するのってjsとかの知識が必要で難しいんじゃないの？って思う方もいらっしゃるかと思いますが、htmlのみで実現可能です。

サンプルを使いながらご紹介したいと思います。

一般的な日付入力フォームの作り方

まずは、一般的な日付の入力フォームの作り方をご紹介します。
使用するものは、inputタグでtype=”date”と入れてください。
そうすることで日付の入力フォームが出来上がります。非常にシンプルですね。

下記にサンプルコードを載せておきます。

<label>
一般的な日付入力フォーム
<input type="date" name="date">
</label>

一般的な日付入力フォームの実装例

上記のサンプルでは、全ての日付を選択することができることがわかりますね。

期間を設けた日付の入力フォームの作り方

上記の様に全ての日付を選択されては困るという方がいらっしゃるかと思います。その悩みを解決する方法は次の通りです。先ほどのhtmlにminとmaxを設定することで、選択する幅を決めることができます。

<label>
期間を設けた日付入力フォーム
<input type="date" name="date" min="2020-05-07" max="2020-05-13">
</labe>

期間を設けた日付入力フォームの実装例

上記の様に選択できないエリアが出てきて　min と　max　で選択した幅の期間のみが選択可能になっていることが確認できるでしょうか。

まとめ

今回は、日付を入力する際に選択する幅を狭めることで選択出来ないエリアを作り出すといった方法をどうやって実現するのかということについてご紹介させていただきました。jsなどの知識も不要でhtmlのみで実現可能ですので非常にシンプルですね。またこの min と maxの数字をphpで制御したりすることで自由度の高い入力フォームを作ることができる様になるのではないでしょうか。