jquery datepicker - put datepicker under the textfield

Question

I have a exam date field like below image:

My code:

<html>
<head>
<link rel="stylesheet" href="js/jquery-ui-themes-1.11.1/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.11.1/jquery-ui.js">    </script>
<script type="text/javascript">
$(function(){
    $("#datepicker1").datepicker({dateFormat: 'dd-mm-yy'});
});
</script>
<style>
.ui-datepicker{
    font-size: 9.5pt;
}

.ui-widget-header{
    font-size: 12px;
    color: #102132;
    background: #D7E5F2;
}

#ui-datepicker-div .ui-state-highlight{
    background: yellow;
    color: red;
    font-weight: bold;
}

.ui-datepicker-current-day .ui-state-active{
    background: white;
    color: blue;
    font-weight: bold;
}
</style>
</head>

<body>
<input type="text" name="examdate" id="datepicker1" /> 
</body>
</html>

Now my question is when I click the text field, I want the datepicker under the textfield. How should I modify it?

do you have enough space at bottom for datepicker to open it? — Afsar, Dec 15 '15 at 06:14

Uttam Kumar Roy · Answer 1 · 2015-12-15T07:18:19.440

$(function(){
    $("#datepicker1").datepicker({
 dateFormat: 'mm/dd/yy',
 beforeShow: function (input, inst) {
  var rect = input.getBoundingClientRect();
  setTimeout(function () {
   inst.dpDiv.css({ top: rect.top + 40, left: rect.left + 0 });
  }, 0);
 }
});

});

<style>
.ui-datepicker{
    font-size: 9.5pt;
}

.ui-widget-header{
    font-size: 12px;
    color: #102132;
    background: #D7E5F2;
}

#ui-datepicker-div .ui-state-highlight{
    background: yellow;
    color: red;
    font-weight: bold;
}

.ui-datepicker-current-day .ui-state-active{
    background: white;
    color: blue;
    font-weight: bold;
}
</style>

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.1/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.1/jquery-ui.js"></script>

<input type="text" name="examdate" id="datepicker1" />

I got solution from [link](http://stackoverflow.com/questions/662220/how-to-change-the-pop-up-position-of-the-jquery-datepicker-control) — Uttam Kumar Roy, Dec 15 '15 at 07:22

score 1 · Answer 2 · answered Dec 15 '15 at 07:10

JQuery datepicker automatically adjust UI Ca lender, We dont need to manage it. if it have proper space above text box then its show default up.

if its not have proper space then it will show automatically under the text field. as you want.

just little scroll down and click on text field. It will show it in as u want to see.

jquery datepicker - put datepicker under the textfield

2 Answers2