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

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

卢克斯解决方案是一个,只有一个小细节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

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