入力された日付の範囲が不正か否かを判別するjQuery

更新日：2017年6月4日

日付の範囲を選択してデータを絞り込み検索したいって場面があった時に、もしも日付の形式がおかしかった場合に
「日付の形式が不正です。」
とアラートを出すjQueryのご紹介です。
いつもながらのことですが、今回もプラグインは一切使いません。

ちなみに日付の形式がおかしいというのは
2017.06.01～2017.04.01
のように新しい日付から古い日付を入力してしまっているケースのことです。

百聞は一見に如かずということで下記の入力フォームをご覧下さい。
絞り込み検索のボタンをクリックするとアラートで注意されます。
逆に2017.06.01を2017.03.01のように変更した上で、絞り込み検索のボタンをクリックすると注意されません。

■日付　～

では記述ですが、HTMLは

■日付　～

と記述します。
なんてことない普通のHTMLかと思います。
maxlength="10"というのが見慣れないという方がいらっしゃるかも知れませんが、これは入力出来る最大文字数のことをいいます。この場合は10なので、10文字以上は入力出来ないように制限しております。

次にjQueryの記述ですが、

$(function() {
	function date() {
		var date_sVal = $("#date_s").val();
		date_sVal = date_sVal.replace(/\./g,"");
		date_sVal = parseInt(date_sVal);

		var date_fVal = $("#date_f").val();
		date_fVal = date_fVal.replace(/\./g,"");
		date_fVal = parseInt(date_fVal);

		if(date_sVal > date_fVal) {
			alert("日付の形式が不正です。");
			event.stopPropagation();
		} else {
			alert("OKです！");
		}
	}

	$("#refine_search").click(function() {
		date();
	});
});

と記述します。

少し長い記述になりますが、かいつまんで説明するとまずdateという名前の関数を作成します。
そのdateという関数内でIDのdate_sとdate_fの数値を取得し、.を削除しています。

つまり2017.06.01であれば
20170601
に変換処理されています。

そうした変換処理をされた上で、IDのdate_sの数値がdate_fの数字よりも大きい数値だった場合にアラートで注意するよう記述しています。つまり
date_sの数値 ＜ date_fの数値
でないといけないのです。

今回の例の場合は
20170601 ＜ 20170401
となるので、date_sの数値がdate_fの数字よりも大きい為、アラートで注意しています。

$("#refine_search").click(function() {
　date();
});
は絞り込み検索ボタンがクリックされた時に、先程作成したdateという名前の関数を呼び出すというものになります。

如何でしたでしょうか？
真新しいjQueryの記述という訳ではありませんが、こうした考え方で日付の範囲が不正か否かを判別するjQueryを記述しています。

一見これどうやったら実現出来るんだろうって思うことでも、考え方一つで自分の知っている範囲のjQueryの記述で実現出来ることはとっても多いです。
難しく考えてネットで色々検索する前に、自分で考える癖を持つことはとても良いことだと思います。