在输入字段下方显示日期选择器

Question

当我点击输入字段上方的日历显示时，我正在使用 bootstrap 日期选择器。我想在输入字段下方显示它。

JS

$(function () {
        $("#fFYear").datepicker({
            dateFormat: "mm/dd/yy",
            showOtherMonths: true,
            selectOtherMonths: true,
            autoclose: true,
            changeMonth: true,
            changeYear: true,
            //gotoCurrent: true,
        }).datepicker("setDate", new Date());
        //alert("#FirstFiscalTo");

    });

输入字段

<input class="textboxCO input-sm form-control datePickerPickcer" id="fiscalYear" name="FiscalYear" type="text" value="6/30/2015 7:12:21 AM">

Answer 1

$(function () {
        $("#fiscalYear").datepicker({
            dateFormat: "mm/dd/yy",
            showOtherMonths: true,
            selectOtherMonths: true,
            autoclose: true,
            changeMonth: true,
            changeYear: true,
            //gotoCurrent: true,
        });
});

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<input id="fiscalYear" name="FiscalYear" type="text" value="6/30/2015 7:12:21 AM">

Answer 2

$(function () {
        $("#fiscalYear").datepicker({
            dateFormat: "mm/dd/yy",
            showOtherMonths: true,
            selectOtherMonths: true,
            autoclose: true,
            changeMonth: true,
            changeYear: true,
            //gotoCurrent: true,
           orientation: "top" // add this
        });
});

参考：https://bootstrap-datepicker.readthedocs.org/en/latest/options.html#orientation

Answer 3

Lücks 解决方案是一个，只有一个小细节 dateFormat 选项无效，是 format 官方文档 here 中引用的。您没有注意到此错误，因为 "mm/dd/yy" 是默认格式。

因此，解决方案将如下所示：

$(function () {
    $("#fiscalYear").datepicker({ //<-- yea .. the id was not right
        format: "mm/dd/yy", // <-- format, not dateFormat
        showOtherMonths: true,
        selectOtherMonths: true,
        autoclose: true,
        changeMonth: true,
        changeYear: true,
        //gotoCurrent: true,
       orientation: "top" // <-- and add this
    });
});

Answer 4

$("#fFYear").datepicker({
    dateFormat: "mm/dd/yy",
    showOtherMonths: true,
    selectOtherMonths: true,
    autoclose: true,
    changeMonth: true,
    changeYear: true,
    orientation: "bottom left" // left bottom of the input field
});

Answer 5

对于来自 jquery 而不是 bootstrap 的日期选择器，选项 [orientation] 不可用。日期选择器面板的定位由 jquery 根据光标相对于 window 的位置自动设置。

为了确保在选择输入字段时日期选择器始终位于光标位置下方，我使用了以下代码

$("input").datepicker().click(function(e){
  $('.ui-datepicker').css('top', e.pageY);
})

e.pageY是window中的当前鼠标Y轴位置。由于class ui-日期选择器的位置是绝对的，当“top”属性设置为光标Y轴值时，日期选择器ui面板将始终显示在光标下方。

在输入字段下方显示日期选择器

Display date picker below input field

javascript

jquery

datepicker

twitter-bootstrap