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

Question

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

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

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

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

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

$("#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 4

对于来自 jquery 而不是 bootstrap 的日期选择器，选项 [orientation] 不可用。 日期选择器面板的位置由 jquery 自动设置，具体取决于相对于窗口的光标位置。

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

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

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

Answer 5

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