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