Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Disable enter key in JQuery ui datepicker

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.

like image 673
NinaNa Avatar asked Feb 11 '13 08:02

NinaNa


3 Answers

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


}
like image 143
bkwdesign Avatar answered Oct 16 '22 05:10

bkwdesign


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.

like image 3
Tim S. Avatar answered Oct 16 '22 06:10

Tim S.


Solved by adding a blur() event to the onClose method of the datepicker.

like image 2
NinaNa Avatar answered Oct 16 '22 07:10

NinaNa