jQuery - Скрыть jQdialog при нажатии клавиши .datepicker

Question

Я использую клавиши со стрелками ВВЕРХ и ВНИЗ для перемещения по входным значениям.

Я пытаюсь скрыть .datepicker при нажатии клавиши со стрелкой вверх или вниз следующим образом: -

$('#booking-docket').keyup(function (e) { 

    if(e.keyCode === 38 && $("#txt-date").is(":focus") || e.keyCode === 40 && $("#txt-date").is(":focus")) { 

     $('#txt-date').datepicker("hide"); 

    } 

}); 

Что происходит в том, что как только #txt-date элемент имеет фокус, он быстро открывается и закрывает datepicker, я думал, добавив .is(:focus), исправит это, но это не тот случай.

Что мне кажется недостающим? (Не уверен, если я могу скрыть DatePicker ТОЛЬКО когда нажатие клавиши уходит из текстового поля?)

HTML КОД

 <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> 

Я попытался следующие, но не мог заставить его работа: -

$(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

Вы можете использовать что-то вроде этого:

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/