(Sample)

「開始日」と「終了日」の入力欄を備えた日時選択フォームを作成し、それぞれの値の関係をJavaScriptでチェックする方法について丁寧に解説していきます!

こういった機能は、イベントの申し込みや予約フォームなど、実務の中でも頻出の要素です。初心者の方でも理解できるよう、基本から順に見ていきましょう。


できること:このフォームの機能概要

  • 📅 ユーザーが開始日・終了日を選択できる
  • ❗ 開始日が終了日より後になっている場合はエラーメッセージを表示
  • ✔ 正常な入力ならアラートで送信完了を通知

HTMLフォームの構成を理解しよう

まずはHTML部分から見ていきます。

フォーム入力欄のポイント

<input type="datetime-local" class="form-control" id="startDate" name="startDate" required>

この type="datetime-local" は、日付と時刻を同時に選べる入力欄です。

  • required 属性で「必須入力」に
  • Bootstrapの .form-control で見た目も整えています

フォーム全体の構造

<form id="dateForm">
  開始日 → 入力欄  
  終了日 → 入力欄  
  [送信] ボタン
</form>
<div id="error" class="text-danger"></div>

エラーメッセージを出すための div#error も準備されています。


JavaScriptでバリデーションを実装しよう!

バリデーションとは、「入力内容がルールに従っているかどうかをチェックする処理」のことです。

送信イベントをキャッチ

dateForm.addEventListener('submit', function (e) {
  e.preventDefault(); // フォームの自動送信を止める
});

まずは送信ボタンが押されたときに処理を止めて、自分でチェックを行います。

日付オブジェクトへ変換

const start = new Date(startDate.value);
const end = new Date(endDate.value);

input[type="datetime-local"] からは文字列が取得されますので、Date オブジェクトに変換する必要があります。

日付の前後関係をチェック!

if (start > end) {
  error.textContent = '開始日は終了日より前でなければなりません。';
  return;
}

ここでは「開始日のほうが終了日より後」だった場合にエラーを表示する条件式を設定しています。

  • start > end という比較は JavaScriptのDate同士の比較演算子 によって実行されます。

エラーの表示と成功の通知

error.textContent = '開始日は終了日より前でなければなりません。';

これは「エラーをその場で表示する」非常にシンプルかつ実用的な方法です。

一方、成功時は:

alert('フォームが正常に送信されました。');

でユーザーに確認を促す作りになっています。


応用するなら…

このフォームは実務でも応用しやすく、こんな発展形にもつながります。

応用アイデア内容
時刻だけでなく曜日や祝日もチェック土日や祝日を避ける制御など
現在時刻より過去の日付を選べないようにするmin 属性やJSで制御可能
入力完了後にサーバーへデータ送信fetch()XMLHttpRequest を使用

今後の学習の指針

このコードをマスターできたら、以下の内容にチャレンジするとさらに理解が深まります!

  1. JavaScriptでの日時処理の基礎(Date、getTimeなど)
  2. moment.jsやdayjsなどの日時操作ライブラリ
  3. HTML5バリデーション属性(min, max, patternなど)
  4. サーバー側との連携:PHPやNode.jsとデータをやりとり
  5. カレンダーUIを導入する(flatpickr、fullcalendar等)

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