Display date picker below input field

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