jQuery ui の datepicker で、キー入力による入力も受け付ける場合、デフォルトで使用すればそのままなのだが、
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 、キー入力両方できないとダメみたいな
筋が合わない仕様を言う人が多いので苦労する。