Jquery-Ui Datepicker how to always display under the input - jquery-ui

Question

I´m using a Datepicker with Jquery-Ui and I need it to always display under the input field. I checked the API documentation but could not find a solution for this. I currently have the following code, could you please advise how I can achieve this? Thank you in advance.
$(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

added some script down. Setting the some styles based on input click event.
$(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" />