読者です 読者をやめる 読者になる 読者になる

datepicker  の入力書式のチェック

jQuery-uidatepicker は、ある程度、日付書式以外のキー入力を抑制してくれるが、
完全ではない。全角文字など、変な文字を入れようとすればできてしまいそのままフォーム送信させたくない。
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 を見なくて意図するチェックにならない。