過去の日付をブロックする日付選択フォーム

(Sample)

今回は、「過去の日付を選べない日付フォーム」を作る方法を初心者向けに丁寧に解説します。
予約システムや日程調整フォームなどで、「今日より前は選ばせたくない！」という場面、よくありますよね。

この機能はHTML＋JavaScriptだけで実現できます！

どんな動作になるの？

フォームには日付選択欄がありますが…

• 今日より前の過去の日付はカレンダーに表示されず、選べません。
• 今日の日付〜未来だけが選択可能になります。

HTMLの基本構造を確認

<form>
    <label for="date">過去の日付は選択できません:</label>
    <input type="date" id="date" name="date">
    <input type="submit" value="送信">
</form>

ポイント

JavaScriptで「今日の日付以降」に制限

document.addEventListener("DOMContentLoaded", function() {
    const dateInput = document.getElementById('date');
    const today = new Date();
    const year = today.getFullYear();
    const month = String(today.getMonth() + 1).padStart(2, '0');
    const day = String(today.getDate()).padStart(2, '0');
    const minDate = `${year}-${month}-${day}`;           
    dateInput.setAttribute('min', minDate);
});

専門用語と仕組みの解説

new Date()

JavaScriptで現在の日付と時間を取得する標準的な方法です。

例：

new Date() → Mon Jun 10 2025 10:00:00 GMT+0900

padStart(2, '0')

これは「1桁の数字を2桁にそろえる」ためのテクニックです。
たとえば「6」を「06」に変換します。

String(6).padStart(2, '0') → "06"

input.setAttribute('min', 日付文字列)

日付入力に「これより前の日付は無効」と設定しています。
これはHTMLのmin属性という標準仕様に従っています。

なぜ DOMContentLoaded を使うの？

これは「HTMLが読み込まれたら実行してね」という合図です。
フォームの要素が存在しないタイミングでJavaScriptが動いてしまうのを防ぐために必要です。

実行の流れを図解！

ページが読み込まれる
　↓
JavaScriptが現在の日付を取得
　↓
input[type="date"] に min="今日の日付" を設定
　↓
ユーザーは今日以降しか選べない

よくある質問

Q. 未来の日付も制限したい場合は？

dateInput.setAttribute('max', '2025-12-31');

このように max 属性を使えば、将来の範囲も制限できます。

応用アイデア

今後の学習ステップ

このコードを通して学べたこと：

• JavaScriptでの日付操作
• HTMLフォームの制約属性（min, max）の活用
• padStart() などの文字列フォーマット

次はこんなことに挑戦してみましょう！

• 日付をローカルタイムゾーンで表示調整する方法
• datetime-local を使って時間指定フォームを作ってみる
• 日付を選ぶと別のUIに影響を与える処理を組んでみる

実務でもよく使う機能なので、しっかり覚えておくと活躍できますよ！質問があればいつでも聞いてくださいね。

最後までお読みいただきありがとうございます。