【HTML】inputで日付の入力欄を初心者でも簡単に作成する方法

誕生日や予約日など、WEBサイトでは日付を入力する機会がたびたびあります。

空の入力欄を用意し、そこに数字を入れてもらうという方法が簡単ですが、それだと間違いが起こりがちです。

手入力は不確実なもので、ちょっとした押し間違いで日付が大きく違ってしまうことがあります。

もっとも確実なのが、HTMLで日付専用の入力欄を作ることです。

表示された日付を選択する方式なので確実です。

また、さまざまな機能を付加できます。

HTMLのinputを用いた日付入力欄の作り方についてまとめたので、ぜひ参考にしてください。

HTMLのinputで日付の入力欄を作る

日付の入力欄の作り方はとても簡単です。

HTML
<input type="date">

フォームの部品であるinput要素に、部品のタイプを示す属性「type」で日付の値「date」を指定するだけです。

ブラウザによって表示はまちまちですが、「年/月/日」など日付をしめすテキストが表示された1行の入力欄が作られます。

入力欄全体か、右側にあるカレンダーのアイコンや「▼」アイコンを押すとカレンダーや日付が縦に並んだリストが表示され、その中から任意の日付を選ぶことが可能です。

これだけでも日付の入力欄として十分な機能を果たしていますが、ここからさらにカスタマイズすることもできます。

デフォルトの日付を設定する

<input type=”date”>だけだと、デフォルトでは日付は空欄になっていますが、任意の日付を表示させることができます。

HTML
<input type="date" value="2021-12-01">

このように「value」属性を指定すると、指定された日付がデフォルトで表示されるようになります。

日付選択の初期位置も、指定した日付に移動します。

PHPが利用可能であれば、以下のコードも試してください。

HTML
<input type="date" value="<?php echo date('Y-m-d'); ?>">

このように記述すると、常に「今日」の日付が表示されるようになります。

今日の日付とは、Webサイトを閲覧している日を指します。

指定できる日付の範囲を限定する

「min」属性は指定できる日付の最小値を設定できます。

HTML
<input type="date" min="2021-10-10">

このように記述すると、2021年10月10日以前の日付は選択できなくなります。

反対に、「max」属性は日付の最大値を設定できます。

HTML
<input type="date" max="2021-11-20">

これで2021年11月20日以降の日付は選択できなくなります。

「min」と「max」は併用が可能です。

HTML
<input type="date" min="2021-10-10" max="2021-11-20">

このように最小値と最大値を設定することで、選択可能な日付の範囲を指定できます。

予約期間などが設けられている場合に、便利な使い方です。

以下のような使い方もおすすめです。

HTML
<input type="date" min="<?php echo date('Y-m-d'); ?>" max="2021-11-20">

PHPで最小値を「今日」に設定しました。

これで、「今日からいつまで」という指定ができます。

日付の間隔を指定する

毎日ではなく、何日おきという設定も可能です。

HTML
<input type="date" step="2">

「step」属性で数字を記述します。

これは「2日ごと」という意味で、選択できる日付が1日おきになります。

これだけでは使いどころがさほど多くない機能ですが、「min」属性と組み合わせることで非常に便利になります。

HTML
<input type="date" min="2021-11-20" step="7">

これは2021年11月20日から7日ごと、つまり1週間ごとという記述で、曜日を指定できるのです。

特定の曜日にしか予約を受け付けていないといったシチュエーションで重宝するでしょう。

候補日を提示する

選択可能な日付が少ないときは、候補日だけを表示させるという方法もあります。

HTML
<input type="date" list="data">
<datalist id="data">
<option value="2021-11-05"></option>
<option value="2021-11-10"></option>
<option value="2021-11-15"></option>
</datalist>

inputの「list」属性とdatalistの「id」属性を同じにしてください。

optionの「value」属性に記述した日付だけが候補日として表示されるようになります。候補日の数に制限はありません。

限られた候補日の中から選ばせたいというときは、こちらの方が新設でしょう。

 まとめ

日付入力欄の作り方について解説しました。

とてもシンプルなコードで、カスタマイズも簡単です。

利用するシチュエーションによって機能を選択し、ユーザーにとって親切な日付入力欄を設定してください。