There seems to be a bug with JQuery UI datepicker, when user manually enters a date, and hits enter, the datepicker closes but focus stays on the field and therefor calendar won't open again until the textbox loses focus and gets it again. How can I supress the enter key behavior? Or are there any other known solutions for this seemingly known bug? Thanks!
EDIT
After working on this a bit more, this is the solution I came up with:
$('#someid').bind('keydown', function(event) {
if (event.which == 13) {var e=jQuery.Event("keydown");
e.which = 9;//tab
e.keyCode = 9;
$(this).trigger(e);
return false;
}
});
The tab key works well and prevents the default behavior of the datepicker's enter key event like selecting today's date in certain cases.
I initially had problems applying your solution. I thought it worthwhile to post my larger snippet that gives a little more context.
if (!Modernizr.inputtypes.date) {
//use modernizer to weed out browsers that already have a timepicker
//http://stackoverflow.com/questions/11297827/html5-date-input-type-interfering-with-jquery-datepicker
$("input[data-val-date]")
.bind('keydown', function (event) { // BEGIN APPLYING NinaNa's S.O. ANSWER
if (event.which == 13) {
var e = jQuery.Event("keydown");
e.which = 9;//tab
e.keyCode = 9;
$(this).trigger(e);
return false;
}
}).datepicker({ dateFormat: 'mm/dd/yy' }); //THEN APPLY JQUERY UI FUNCTIONALITY
}
Try this
$(document).keydown(keyDownHandler); // use appropriate selector for the keydown handler
function keyDownHandler(e) {
if(e.keyCode === 13) {
e.stopPropagation();
e.preventDefault();
return false;
}
}
e.stopPropagation
prevents bubbling, e.preventDefault
prevents default behaviour and returning false does too, I think.
You should have a look what works best: keyUp
, keyDown
or keyPress
.
Solved by adding a blur() event to the onClose method of the datepicker.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With