Jquery-Ui Datepicker, как всегда отображать под входом

Question

Я использую Datepicker с Jquery-Ui, и мне нужно, чтобы он всегда отображался под полем ввода.Я проверил документацию API, но не смог найти решение для этого.В настоящее время у меня есть следующий код, не могли бы вы посоветовать, как мне этого добиться?Заранее спасибо.

$(document).ready(function () {
$('#DepartureDate').datepicker({
    onSelect: function () {
        var toDate = $(this).datepicker('getDate');
        toDate.setDate(toDate.getDate() + 7);
        $('#ReturnDate').datepicker('setDate', toDate);
    },
    onClose: function() {
       window.setTimeout(function(){
       jQuery('#ReturnDate').datepicker('show');
    }, 50);
 }
}).datepicker('setDate', '+1');
$('#ReturnDate').datepicker().datepicker('setDate', '+8');
$('#CheckIn').datepicker({
    onSelect: function () {
        var toDate = $(this).datepicker('getDate');
        toDate.setDate(toDate.getDate() + 1);
        $('#CheckOut').datepicker('setDate', toDate);
    },
    onClose: function() {
    window.setTimeout(function(){
    jQuery('#CheckOut').datepicker('show');
    }, 50);
}
}).datepicker('setDate', '+1');
$('#CheckOut').datepicker().datepicker('setDate', '+2');

});

.tall {
  height: 400px;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="tall">
  Tall Div
</div>


<label>Departure Date:</label>
        <input type="text" name="dateFrom" id="DepartureDate" class="form-control" readonly="readonly" style="cursor:pointer; background-color: #FFFFFF" />

        <label>Return Date:</label>
        <input type="text" name="dateTo" id="ReturnDate" class="form-control" readonly="readonly" style="cursor:pointer; background-color: #FFFFFF" />


 <br><br>

                <label>Check In</label>
                <input type="text" name="dateFrom" id="CheckIn" class="form-control" readonly="readonly" style="cursor:pointer; background-color: #FFFFFF" />

                <label>Check Out</label>
                <input type="text" name="dateTo" id="CheckOut" class="form-control" readonly="readonly" style="cursor:pointer; background-color: #FFFFFF" />

Answer 1

добавил скрипт вниз.Установка некоторых стилей на основе события щелчка ввода.

$(document).ready(function () {
$('#DepartureDate').datepicker({
    onSelect: function () {
        var toDate = $(this).datepicker('getDate');
        toDate.setDate(toDate.getDate() + 7);
        $('#ReturnDate').datepicker('setDate', toDate);
    },
    onClose: function() {
       window.setTimeout(function(){
       jQuery('#ReturnDate').datepicker('show');
    }, 50);
 }
}).datepicker('setDate', '+1');
$('#ReturnDate').datepicker().datepicker('setDate', '+8');
$('#CheckIn').datepicker({
    onSelect: function () {
        var toDate = $(this).datepicker('getDate');
        toDate.setDate(toDate.getDate() + 1);
        $('#CheckOut').datepicker('setDate', toDate);
    },
    onClose: function() {
    window.setTimeout(function(){
    jQuery('#CheckOut').datepicker('show');
    }, 50);
    
}
}).datepicker('setDate', '+1');
$('#CheckOut').datepicker().datepicker('setDate', '+2');

});

var t;
$("input").click(function(e){
    var cal = $("#ui-datepicker-div").css('top', e.pageY + 15);
    $(cal).insertAfter( $(this) );     
    t =  e.pageY + 15;
});

$("input").focus(function(){
    var cal = $("#ui-datepicker-div").css('top', t);
    $(cal).insertAfter( $(this) );     
});

.tall {
  height: 400px;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="tall">
  Tall Div
</div>


<label>Departure Date:</label>
        <input type="text" name="dateFrom" id="DepartureDate" class="form-control" readonly="readonly" style="cursor:pointer; background-color: #FFFFFF" />

        <label>Return Date:</label>
        <input type="text" name="dateTo" id="ReturnDate" class="form-control" readonly="readonly" style="cursor:pointer; background-color: #FFFFFF" />


 <br><br>

                <label>Check In</label>
                <input type="text" name="dateFrom" id="CheckIn" class="form-control" readonly="readonly" style="cursor:pointer; background-color: #FFFFFF" />

                <label>Check Out</label>
                <input type="text" name="dateTo" id="CheckOut" class="form-control" readonly="readonly" style="cursor:pointer; background-color: #FFFFFF" />