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

datepicker キー入力と併用させる

jQuery uidatepicker で、キー入力による入力も受け付ける場合、デフォルトで使用すればそのままなのだが、
datepicker カレンダーを開いた状態でキー入力して Enterキー を押すとカレンダーが示す選択日が入ってしまう。

これを回避するために、jQueryイベントの処理として以下を考えたのだが、、
  stopPropagation() → 親要素への伝播の停止させる
  preventDefault()  → 自要素の伝播を停止
  return false で親要素も自要素も伝播を停止

keydown イベントでこれを書いたのだが、ダメだった。

結局、コーディングしたのは、以下のように、datepicker hide メソッドを keydown イベントで実行するようにした。。

ついでに、全角数字で入力されても半角数字で、また、20150815 と区切り無しで入力されても
スラッシュ'/ 'を挟むようにしたいので以下のようにした。

/* for 全角数字入力→ 半角数字 */
var numberConvert = function(value){
    var han = value.replace(/[0-9]/g, function(s){ return String.fromCharCode(s.charCodeAt(0)-0xFEE0); });
   return han.replace(/^[\-|ー|―|-]/, function(s){ return '-'; });
};

$('#dateinput').keydown(function(eo){
   $(this).datepicker("hide");
   if (eo.keyCode===13 || eo.keyCode===9){
      var str = numberConvert($(this).val());
      $(this).val(str);
      var s = $(this).val();
      if (s.match(/^\d{4}(0[1-9]|1[012])(0[1-9]|[12][0-9]|3[01])$/)){
         $(this).val(s.substr(0, 4) + "/" + s.substr(4, 2) + "/" + s.substr(6, 2));
      }
   }
});

イベントコード = 9 → Tabキー押下も作用するすようにした

==================================

input タグに readonly="readonly" 属性をつけてキー入力させない方が良いように
思えるのだが、datepicker 、キー入力両方できないとダメみたいな
筋が合わない仕様を言う人が多いので苦労する。