JQuery - Hide jQdialog when pressing .datepicker

Question

I use the UP and DOWN arrow keys to move through the input values.

I am trying to hide .datepicker when the UP or DOWN arrow is pressed as follows: -

$('#booking-docket').keyup(function (e) { if(e.keyCode === 38 && $("#txt-date").is(":focus") || e.keyCode === 40 && $("#txt-date").is(":focus")) { $('#txt-date').datepicker("hide"); } }); 

What happens, since as soon as the #txt-date element has focus, it quickly opens and closes the date, I thought adding .is(:focus) fix it, but it is not.

What am I missing? (not sure if I can hide the datupixer ONLY when the keystroke leaves the text field?)

HTML code

  <div class="booking-right left"> <div class="col-1 left"> <p class="p-lbl-txt left">TELEPHONE:</p> <input type="text" id="txt-telephone" class="input-txt-sml move right" tabindex="5" /> </div> <div class="col-2 left"> <p class="p-lbl-txt left">DATE:</p> <input type="text" id="txt-date" class="input-txt-sml move right" tabindex="7" /> </div> <div class="col-1 left"> <p class="p-lbl-txt left">LEAD TIME:</p> <input type="text" id="txt-lead" class="input-txt-sml move right" tabindex="6" /> </div> <div class="col-2 left"> <p class="p-lbl-txt left">TIME:</p> <input type="text" id="txt-min" class="input-txt-xxsml move right" tabindex="9" /> <input type="text" id="txt-hour" class="input-txt-xxsml move right" tabindex="8" /> </div> </div> 

I tried the following, but could not get it to work: -

 $(function() { $( "#txt-date" ).datepicker({ dateFormat: "dd/mm/yy" }); }); $('#booking-docket').keyup(function (e) { /*Add parentheses in your `if` statement to separate the `AND` and `OR`:*/ if ((e.keyCode === 38 && $("#txt-date").is(":focus"))) { $("#txt-lead").focus();//change focus to an other input $('#txt-date').datepicker("hide");//hide the datepicker } }); 

Answer 1

You can use something like this:

JS:

 $('#txt-date').keyup(function (e) { if ((e.keyCode === 38 && $("#txt-date").is(":focus")) || (e.keyCode === 40 && $("#txt-date").is(":focus"))) { if (e.keyCode === 38) $("#txt-telephone").focus(); else if (e.keyCode === 40) $("#txt-lead").focus(); $('#txt-date').datepicker("hide"); } }); /*Add the datepicker*/ $(function() { $("#txt-date").datepicker(); }); 

JSFIDDLE: http://jsfiddle.net/ghorg12110/ghwvvkve/2/