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

Question

I am using bootstrap datepicker when I click on input field calendar display above the input field. I want to display it bellow input field.

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 Field

<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 solution is the one, just one minor detail dateFormat option is not valid, is format as referenced in the official doc here . You are not noticing this error because "mm/dd/yy" is the default format.

So, te solution will look like:

$(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
        });
});

Reference: 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

For datepicker from jquery rather than bootstrap, option [orientation] is not available. The positioning of the datepicker panel is auto set by jquery depending on the cursor position relative to the window.

To ensure that datepicker is always below the cursor position when an input field is selected, I used the below code

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

e.pageY is the current mouse Y axis position in window. as class ui-datepicker position is absolute, when "top" attribute is set to cursor Y axis value, the datepicker ui panel will be displayed always below cursor.

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