jQuery-ui の datepicker は、ある程度、日付書式以外のキー入力を抑制してくれるが、
完全ではない。全角文字など、変な文字を入れようとすればできてしまいそのままフォーム送信させたくない。
9月31日みたいな、あり得ない日付チェックはとりあえずサーバサイドのチェックに任せるとして、
日付書式だけでもチェックして input フィールドの背景色をピンクにして注意喚起したい。
以下、サンプル、、、、
<link rel="stylesheet" type="text/css" href="css/jquery-ui-1.10.3.custom.min.css">
<style type="text/css">
.ui-datepicker{
font-size: 80%;
}
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
width: auto;
}
#datepicker{ width: 80px; }
pre{
border: 1px solid #000066;
}
</style>
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.3.custom.js"></script>
<script type="text/javascript" src="js/jquery.ui.datepicker-ja.js"></script>
<script type="text/javascript">
$(function(){
$.datepicker.setDefaults( $.datepicker.regional[ "ja" ] );
$("#datepicker").datepicker({
prevText:"前月", nextText:"翌月",
changeMonth: true,
changeYear: true, yearRange: '-2:+4',
});
// onchange で日付書式をチェック
$("#datepicker").change(dateInputCheck);
$('form').submit(function(e){
// datepicker の input 日付書式入力をチェックする。
var ans = dateInputCheck( { 'target' : $("#datepicker") }, e);
return ans;
});
});
function dateInputCheck(obj, e){
// 未入力をOKにする場合、以下コメントアウトを外す。
//if ($(obj['target']).val()==="") return true;
var datestr = $(obj['target']).val();
if (datestr.match(/^\d{4}\/(0?[1-9]|1[012])\/(0?[1-9]|[12][0-9]|3[01])$/)
|| datestr.match(/^\d{4}\-(0?[1-9]|1[012])\-(0?[1-9]|[12][0-9]|3[01])$/)){
var ary = datestr.split(/\/|\-/);
if (parseInt(ary[2]) === new Date(datestr).getDate()){
$(obj['target']).css("background-color", "#ffffff");
return true;
}else{
$(obj['target']).css("background-color", "#ffc0cb;");
return false;
}
}else{
$(obj['target']).css("background-color", "#ffc0cb;");
return false;
}
}
</script>
===============================================
上の、$('form').submit(function(e){ ... } で、定義した dateInputCheck 関数に、
{ 'target' : $("#datepicker") }
として、'target' のハッシュで渡すところが、第1のポイントで
第2のポイントは、
$(obj['target'])
で、form submit で呼ばれた時も、datepicker の onchange で呼ばれた時も、
両方で同じ参照をするようにしていること。
$(this) を使ってしまうと、form submit では、datepicker を見なくて意図するチェックにならない。