How to disable enter key inside jqueryui datepicker

Question

I am using jQueryUI date picker and when user clicks on a textbox and hits the enter key the current date gets populated. I want to avoid that. I have tried this:

$('#datepicker').on('keypress',  function(e){
    if (e.which == 13) {
        e.preventDefault();
        e.stopPropagation();
        return false; 
    }
});

With no luck

here is the link of demo https://jsfiddle.net/shalini456/zwjzo175/

Possible duplicate of [Disable enter key in JQuery ui datepicker](http://stackoverflow.com/questions/14808416/disable-enter-key-in-jquery-ui-datepicker) — Charly H, Mar 04 '16 at 19:52
Possible duplicate of [jQuery: Prevent enter key](http://stackoverflow.com/questions/4753823/jquery-prevent-enter-key) — Maxime Savard, Mar 04 '16 at 20:04
@CharlyH before posting my question i did try the solutions mentioned in SO but it doesnt work see https://jsfiddle.net/shalini456/zwjzo175/2/ — Shalini, Mar 05 '16 at 06:16
@MaximeSavard the solution mentioned in that thread doesnt work for me :( — Shalini, Mar 05 '16 at 06:16
@Shalini look at my answer or at the solution from Bhupesh Kushwaha in the comments — Charly H, Mar 07 '16 at 08:35
@Shalini this does not make sense to me. In the docs, I see: *`ENTER`: Select the focused date.* Are users not focusing or selecting a date before they hit enter? — Twisty, Mar 07 '16 at 19:51

score 6 · Accepted Answer · answered Mar 04 '16 at 19:57

6

Try this:

$("#datepicker").keydown(myfunction); // use keydown

function myfunction(e) {
    if(e.keyCode === 13) {
        e.stopPropagation();
        e.preventDefault();

        return false;
    }
}

answered Mar 04 '16 at 19:57

Bhupesh

883
7
16

there is no need for strict comparison here, or am I missing something? – Maxime Savard Mar 04 '16 at 20:01
can you provide the version of jQueryUI datepicker – Bhupesh Mar 05 '16 at 05:18
@BhupeshKushwaha it doesnt work can you please try to edit and update https://jsfiddle.net/shalini456/zwjzo175/3/ – Shalini Mar 05 '16 at 06:19
1

hello try its work – Bhupesh Mar 05 '16 at 13:16
@BhupeshKushwaha This works for me, you should update your answer. but I've made it shorter. Look at this fiddle : jsfiddle.net/zwjzo175/27 – Charly H Mar 07 '16 at 08:36

score 3 · Answer 2 · edited Apr 30 '18 at 15:47

3

Some of the solutions here appear to work because they throw an exception of some kind.

There are two things which seem to make it work without throwing an exception.

As mentioned by "Charly H" the keydown binding must happen before calling datepicker.

Then in the keydown handler call e.stopImmediatePropagation(). E.g.

  $('#datepicker').bind('keydown',function(e){

    if (e.which == 13)
        e.stopImmediatePropagation();
  })
  .datepicker();

Fiddle: https://jsfiddle.net/8fyvh8wd/18/

edited Apr 30 '18 at 15:47

Shawn

4,758
1
20
29

answered Mar 06 '18 at 17:11

OlduwanSteve

1,263
14
16

This answer is the hero that Gotham deserves. – Joel Christophel Apr 30 '18 at 15:31
Binding keydown event handler before initializing the datepicker worked for me. – Omer Feb 23 '19 at 01:19

score 0 · Answer 3 · answered Mar 04 '16 at 19:43

0

Try this :

$('#datepicker').keypress(function(e){

    if (e.keyCode == 10 || e.keyCode == 13) //10 is Line Feed and 13 is Carriage Return
        e.preventDefault();

  });

answered Mar 04 '16 at 19:43

Maxime Savard

128
12

score 0 · Answer 4 · answered Mar 05 '16 at 06:44

If you cant disable the enter keypress there is a work around for this... you can just remove the focus from "#datepicker" check the following updated fiddle https://jsfiddle.net/shalini456/zwjzo175/4/

jQuery

$(document).ready(function(){
    $( "#datepicker" ).datepicker();

  $("#datepicker").on('click', function(){
   $("#datepicker").blur();
  });


});

score 0 · Answer 5 · answered Mar 07 '16 at 08:33

0

I've shortened down the solution of Bhupesh Kushwaha, which he provided in the comments

$(function() {
    $("input").bind('keydown', function (e) {
    if (event.which == 13) {
    $(this).trigger(e); 
    return false; 
  } 
    }).datepicker(); 
  });

This worked for me: https://jsfiddle.net/zwjzo175/27/

answered Mar 07 '16 at 08:33

Charly H

147
9

This does not work. There is an error in the code (event is not defined). If I replace "event" by "e", it says "too much recursion". – YLombardi Apr 25 '16 at 14:32

score 0 · Answer 6 · answered Feb 19 '18 at 23:53

guys,

I know that this might be too late, but the only solution that worked for me was the one from "Charly H", where he put the code binding the input text before the declaration of the datepicker.

I guess the reason is that the bubble propagation and the priority of it.

The code would look like this:

$(function() {
    $("input").bind('keydown', function (e) {
        if (event.which == 13) {
            e.preventDefault();
            e.stopPropagation();
            $(this).trigger(e); 
            return false;
        } 
    }).datepicker(); 
});

Calling `$(this).trigger(e);` is recursive, and throws a stack overflow exception, that's why it *sort of* works — OlduwanSteve, Mar 06 '18 at 16:50

How to disable enter key inside jqueryui datepicker

6 Answers6

Linked