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.

I'm encountering this same problem. My UI datepickers are set 'blank' by a script that runs in edge scenarios. Users enter numeric text and tab to the next field and their numbers are auto-formatted correctly into proper 'slash deliniated' dates. However, if they enter numbers and press the ENTER key, it ignores their input and replaces their numbers with TODAY's date instead. My attempt to implement your event handler seems to not work - however, I am using in addition to JQuery UI, some additional unobtrusive validators. Not sure if those are getting in the way or not. — bkwdesign, Feb 25 '14 at 14:51
Ok, figured out my issue. See my additional answer for code snippet. Basically, I had to ensure I was binding the keydown handler solution to the selected elements first, before applying the JQuery UI datepicker functionality — bkwdesign, Feb 25 '14 at 14:57
Your solution relies upon an exception being thrown. See my answer below for a more elegant solution. — Joel Christophel, Apr 30 '18 at 15:51

score 7 · Answer 1 · answered Feb 25 '14 at 15:01

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


}

score 3 · Accepted Answer · answered Feb 11 '13 at 08:37

3

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.

answered Feb 11 '13 at 08:37

Tim S.

13,597
7
46
72

Thanks for the quick response, see my workaround bellow, what do you think? – NinaNa Feb 11 '13 at 08:40
@NinaNa Well, if it does the job, why not? I think it's a great solution. – Tim S. Feb 11 '13 at 09:00
only thing is I realized that I want to suppress the behavior that the enter key puts in the textbox today's date when date entered is invalid or empty... so guess I will need s\t like you wrote – NinaNa Feb 11 '13 at 09:03

score 2 · Answer 3 · answered Feb 11 '13 at 08:39

2

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

answered Feb 11 '13 at 08:39

NinaNa

1,575
6
15
21

score 1 · Answer 4 · edited Jan 24 '16 at 14:31

1

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.

edited Jan 24 '16 at 14:31

Mr Lister

45,515
15
108
150

answered Jan 18 '16 at 10:50

ARS

11
2

Joel Christophel · Answer 5 · 2018-04-30T15:56:47.353

1

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

edited Apr 30 '18 at 15:56

answered Apr 30 '18 at 15:49

Joel Christophel

2,604
4
30
49

Disable enter key in JQuery ui datepicker

5 Answers5

Linked

Related