TECH Matari

日付・時刻の整合性をチェックしたい

とあるサイトにて、日付・時刻の値をチェックする処理が必要となる。日付・時刻の入力には、先のエントリーの実務で使える・使ったjQueryプラグイン5選にも書いた、DatePickerとClockPickを使っている。

これらのインターフェースを用いて値を入力する場合、必ず正しい日付が入るので、極端なところ、値の整合性をチェックする必要はない。しかし、このインターフェースと同時に、手動による入力を認めている場合、入力ミス等でおかしな値を入力される場合がある。たとえば…

• ２００９，７，３０ → 全角文字
• 2009–10-23 → ハイフンが多い
• 2009-2-29 → 閏年じゃないから29日は無い
• 10/2 → 西暦が足りない
• 2009-13-1 → 13月は無い

などなど。

そこでまず、既存のプラグイン等で、日付の整合性をチェックするものが無いか探したのだが・・日付単体でチェックするものを見つけることができなかった。そこで…

jquery.validation.jsを試す

日付だけでなく、フォームの入力値全体のバリデーションとして、bassistance.de » jQuery plugin: Validationがあるで、このプラグインの日付部分のみを利用してみた。しかし、このjquery.validation.jsによる日付チェックはいくつか欠点があった。

• 入力が、「yyyy/mm/dd」 というフォーマットならOKだが、「yyyy-mm-dd」はダメ（ハイフンをセパレータとして使えない）
• 「2009/7/40」という入力値もOKとなる。

jquery.validation.jsのソースを見てみると、内部で日付のチェックに、JavaScriptの組み込みのDate関数を使ってnewできるかどうかチェックしているだけだった。

そこで、JavaScriptのDate関数を調べてみたのだが、やはり「2009/7/40」という入力がエラーにならない。
…なぜ？と思いよく調べてみると、「2009/7/40」というデータは、内部的に繰り上げされ「2009/8/9」になっていたのだ!!!

<br />
 var d = new Date("2009/7/40");<br />
 alert(d.toString());<br />
 

上記スクリプトで表示されるのは「”Sun Aug 09 2009 00:00:00 GMT+0900″」。
また、「2009/13/15」という存在しない月も、内部的には「2010/1/15」として処理される。

…それでいのか？

JavaScriptのDate関数はそれでいいかもしれないが、実装するWebアプリとしては、それでは良くない。
しょうがないので、自分で整合性をチェックするためのjQueryプラグインを作った。

日付の整合性チェック → jquery.dateValidate.js
時刻の整合性チェック → jquery.timeValidate.js

jquery.dateValidate.js , jquery.timeValidate.js 組み込みサンプル

HTML部分ソース

</p>

<h3>スクリプト部分ソース</h3>

<p>[javascript]alert( $('#start_date_day').dateValidate() );[/javascript]</p>

<p>日付が入力されているtextに対し、dateValidate()をコールすると、正しい日付であればtrueを、不正な日付であればfalseを返す。<br />
 デフォルトでは、空白の場合、trueを返しますが、パラメータで空白をfalseにすることも可能。</p>

<p>[javascript]alert( $('#start_date_day').dateValidate({required:true}) );[/javascript]</p>

<p>また、時刻も同じように<strong>「26:00」</strong>とか、<strong>「12:90」</strong>とか、普通は使わない値を入力された場合にチェックするプラグインを作った。</p>

<h3>HTML部分ソース</h3>

<p>[html]<br />
 <input id="start_date_time" name="start_date_time" type="text" />

スクリプト部分ソース

alert( $('#start_date_time').timeValidate() );

こちらも、空白時の動作を設定できる。また、日付フォーマットを、「時：分」にするか「時：分：秒」にするかも設定できます。↓こんな感じで。

alert( $('#start_date_time').timeValidate({useSec:true,required:true}) );

…まぁ、JavaScriptを触ったことある人なら、わざわざjQueryのプラグインにせずとも、普通に処理／関数を書けばOKだろというくらい簡単な処理なんだけれど、正規表現一発じゃ済まなかったのと、jQueryプラグインにすることで、再利用しやすくなるかなーと思ったので。

以下、サンプルとjsファイルをzipで置いておきます。
date_time_validate.zip

不具合や要望があれば、コメントお願いします。

Popularity: 28% [?]

written by ANN