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

Please provide a fiddle or you can try by using `position:relative` css for parent element of datepicker. — Amit, Jun 30 '15 at 10:10
https://bootstrap-datepicker.readthedocs.org/en/latest/options.html#orientation is this what you are looking for ? — Mihai Tibrea, Jun 30 '15 at 10:29

score 17 · Answer 1 · answered Dec 18 '15 at 14:25

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

score 9 · Answer 2 · edited Jan 30 '19 at 10:28

9

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

edited Jan 30 '19 at 10:28

Pingolin

3,161
6
25
40

answered Jan 30 '19 at 09:53

J.Pansaniya

121
1
1

Exactly what I was looking for..Thanks!! :) – shivshankar Sep 13 '19 at 11:20

score 8 · Answer 3 · answered Nov 09 '15 at 14:14

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

score 0 · Accepted Answer · answered Jun 30 '15 at 10:22

0

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

answered Jun 30 '15 at 10:22

kavetiraviteja

2,058
1
15
35

4

What specifically in this snippet fixes the problem? – Ciaran Gallagher Oct 01 '19 at 15:22
Code-only answers are low-value on Stackoverflow because they do very little to educate/empower thousands of future researchers. – mickmackusa Dec 17 '19 at 21:13

score 0 · Answer 5 · answered May 17 '21 at 08:19

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.

Display date picker below input field

5 Answers5