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

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

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

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

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

ただのテキストボックスに手入力してもらっても問題はありませんが、「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」というフォーマット（書式）で記述する必要があります。（それ以外の書式では無効になります。）

HTML

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

プレビュー

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

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

HTML

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

JavaScript

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」というフォーマット（書式）で記述する必要があります。（それ以外の書式では無効になります。）

HTML

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

プレビュー

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

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

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

HTML

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

JavaScript

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);
}

プレビュー