Disable enter key in JQuery ui datepicker

Question

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.

Answer 1

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.

Answer 2

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


}

Answer 3

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

Answer 4

The simplest approach is to instantiate the datepicker on the <input> like you normally would, but then get rid of the focus handler ourselves and replace it with a click handler.

Answer 5

Use e.stopImmediatePropagation(), and make sure the keydown binding happens before calling datepicker().

  $('input').on('keydown', function(e) {
      if (e.which == 13)
          e.stopImmediatePropagation();
  }).datepicker();

Credit