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

【问题标题】：Display date picker below input field在输入字段下方显示日期选择器
【发布时间】：2015-06-30 10:07:50
【问题描述】：

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

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

【问题讨论】：

请提供一个小提琴，或者您可以尝试使用position:relative css 作为日期选择器的父元素。
bootstrap-datepicker.readthedocs.org/en/latest/… 这是你要找的吗？
看我在stackoverflow.com/a/46175560/7250028">link</a>上的回答。你会得到正确的方向。

标签： javascript jquery twitter-bootstrap datepicker

【解决方案1】：

Lücks 解决方案是一个，只有一个小细节dateFormat 选项无效，是官方文档here 中引用的format。您没有注意到此错误，因为 "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
    });
});

【讨论】：

【解决方案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

【讨论】：

【解决方案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
});

【讨论】：

正是我要找的……谢谢！！ :)

【解决方案4】：

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

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

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

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

【讨论】：

【解决方案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">

【讨论】：

这个 sn-p 中具体解决了什么问题？
纯代码答案在 Stackoverflow 上的价值很低，因为它们对教育/授权成千上万的未来研究人员几乎没有作用。