Question

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

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

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

$(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 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 根据光标相对于窗口的位置自动设置。

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

braintree.clientKey

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

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

5 个答案: