• HTML

HTMLのinputのdateで日付の入力欄を作る【初期値や期間の制限】

投稿日:2023年10月01日（最終更新日:2023年09月28日）

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

日付の入力欄を作るには？

HTMLのinputタグのtype属性にdateを指定すると、フォームなどに日付の入力欄を設置することができます。

ただのテキストボックスに手入力してもらっても問題はありませんが、「input type="date"」を使えばカレンダーが表示されるので、ユーザーに直感的に日付を入力してもらうことが可能になります。

表示されるカレンダーの見た目はOSやブラウザによって異なります。これはデフォルトCSSによりスタイルが決められているためで、スタイルシートで上書きすれば思い通りのデザインに変更することも可能です。

input[type="date"]の使い方

日付の入力欄はinputタグのtype属性にdateを指定することで使用できます。（inputタグに閉じタグは不要です。）

初期値を設定する【value属性】

ユーザーが日付を選択するまでtype="date"による入力欄には「yyyy/mm/dd」という文字が表示されています。

ここに初期値として任意の日付を表示させたい場合は、「value属性」を設定します。

なお属性値に使用する日付は「yyyy-mm-dd」というフォーマット（書式）で記述する必要があります。（それ以外の書式では無効になります。）

<input type="date" value="2023-01-01">

当日の日付を初期値にする【Javascript】

上記のようにHTML内に記述した場合は初期値は固定されるため、常に入力当日の日付を初期値として設定したい場合は、Javascriptを使って動的に日付を取得する処理を作る必要があります。

<input type="date" id="datepicker" value="">

window.onload = function(){
    var getToday = new Date();
    var y = getToday.getFullYear();
    var m = getToday.getMonth() + 1;
    var d = getToday.getDate();
    var today = y + "-" + m.toString().padStart(2,'0') + "-" + d.toString().padStart(2,'0');
    document.getElementById("datepicker").setAttribute("value",today);
}

1行目ページの読み込まれたら処理を開始します。

2～5行目現在日時を取得します。

6行目input="date"のvalueの値に対応するように、「yyyy-mm-dd」の書式にフォーマットします。

7行目valueの値にセットして完了です。

選択可能な期間を設定する【minとmax属性】

例えば予約フォームなどを作るときには今日より過去の日付は選択できないようにしておく必要があります。

min属性とmax属性を使えば選択可能な期間を制限することが可能です。

min属性とmax属性においても属性値に使用する日付は「yyyy-mm-dd」というフォーマット（書式）で記述する必要があります。（それ以外の書式では無効になります。）

<input type="date" value="2023-01-15" max="2023-01-25" min="2023-01-05">

当日の日付を基準に期間を設定する【Javascript】

上記のようにHTML内に記述した場合は期間は固定されるため、常に入力当日の日付を基準として選択可能な期間を設定したい場合は、Javascriptを使って動的に日付を取得する処理を作る必要があります。

下の例では、min属性に動的に取得した当日の値を設定することで、当日より過去の日付は選択できないようにしています。

<input type="date" id="datepicker2" min="">

window.onload = function(){
    var getToday = new Date();
    var y = getToday.getFullYear();
    var m = getToday.getMonth() + 1;
    var d = getToday.getDate();
    var today = y + "-" + m.toString().padStart(2,'0') + "-" + d.toString().padStart(2,'0');
    document.getElementById("datepicker2").setAttribute("value",today);
    document.getElementById("datepicker2").setAttribute("min",today);
}

一定の間隔で日付を選択可能にする【step属性】

step属性は1日おきや2日おきの日付を選択可能にすることができます。

下の例ではstep属性に「2」を設定したので、1日おきの日付のみ選択できるようになっています。

<input type="date" step="1">

必須項目にする【required】

日付の入力を必須項目にしたい場合は、「required」を追記します。

日付を入力せずに送信を行おうとするとメッセージが表示されて送信がキャンセルされます。

変更不可にする【readonly】

あらかじめ設定した初期値からユーザーが変更できないようにしたい場合は「readonly」を追記します。

入力欄はグレーの状態で表示されて操作することができなくなります。

無効化する【disabled】

disabled属性を設定すると、その入力欄を無効化することが出来ます。

入力欄はグレーの状態で表示されて変更することができなくなります。

readonlyとdisabledの違いはデータが送信されるかどうかです。readonlyはデータ自体は送信されますが、disabledを設定するとデータの変更できないだけでなくそのデータ自体も送信されなくなります。

まとめ

以上がHTMLのinputのtype="date"で日付の入力欄を作る方法と初期値や期間の制限を設けるやり方です。

よりデザインや機能に富んだ日付の入力欄を設置したい場合はjQuery UIのdatepickerの導入がおすすめです。

jQuery UIのdatepickerの使い方

jQueryUIのdatepickerを使えば、日付の入力フォームを設置した時にカレンダーを表示させて、ユーザーに直感操作で日付を選択してもらうことができるようになります。便利ですが、デフォルトでは英語表記のため、日本語化を行う必要があります...【もっと読む】