CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapdatepicker
Muhammad Riaz
Muhammad Riaz

Reputation: 403

Display date picker below input field

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

Upvotes: 9

Views: 56042

Answers (5)

Yu Tian Toby
Yu Tian Toby

Reputation: 419

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.

Upvotes: 0

J.Pansaniya
J.Pansaniya

Reputation: 121

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

Upvotes: 9

ngelx
ngelx

Reputation: 504

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

Upvotes: 18

L&#252;cks
L&#252;cks

Reputation: 3994

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

Upvotes: 9

kavetiraviteja
kavetiraviteja

Reputation: 2208

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

Upvotes: 0

Related Questions