(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 を使用 |
今後の学習の指針
このコードをマスターできたら、以下の内容にチャレンジするとさらに理解が深まります!
- JavaScriptでの日時処理の基礎(Date、getTimeなど)
- moment.jsやdayjsなどの日時操作ライブラリ
- HTML5バリデーション属性(min, max, patternなど)
- サーバー側との連携:PHPやNode.jsとデータをやりとり
- カレンダーUIを導入する(flatpickr、fullcalendar等)