Force jQuery UI Datepicker to display below input field
Solution 1
you can achieve your goal by setting the css of the date picker pop.
Use the below code to set the CSS, the use of setTimeout is to avoid the overriding of the CSS.
Here i am finding out the top and left of the date time picker text box and using these value to set the position of the date time picker popup
On the information about beforeShow event check here.
https://api.jqueryui.com/datepicker/#option-beforeShow
$(".datepicker").datepicker({
beforeShow: function (input, inst) {
setTimeout(function () {
inst.dpDiv.css({
top: $(".datepicker").offset().top + 35,
left: $(".datepicker").offset().left
});
}, 0);
}
});
Here is the fiddle : https://jsfiddle.net/0qfycgm1/14/
Solution 2
add
ui-datepicker{
margin-top: 0px;
}
I have added this code to your fiddle and have tested it. hope this will help. have updated your fiddle
Solution 3
A simple fix is by adjusting the frontend using CSS for the CALENDER Box.
Add the following to your CSS file.
.ui-datepicker{
margin-top: 300px;
}
I tried it in your Fiddle link, was working perfectly fine.
Maurice Twomey
Updated on June 12, 2022Comments
-
Maurice Twomey almost 2 years
I have a page which contains a form and few fields. My issues are as follow:
- I am trying to force jQuery UI datepicker to display below the input field.
- When I click in the input field, I want the field to scroll to the top of the page also. I think I have this working.
Here is my jQuery:
JQUERY:
$( document ).ready(function() { // Set Datepicker $(".datepicker").datepicker(); $("input").focus(function () { $('html, body').animate({ scrollTop: $(this).offset().top - 25 }, 10); }); });
Link to a fiddle: https://jsfiddle.net/MauriceT/0qfycgm1/10/
Here is what I want to avoid:
Datepicker displays above the input field
Any suggestions would be greatly appreciated. Thanks!
-
Maurice Twomey almost 8 yearsThanks for your response, Ankush! However, I'm not sure this is a robust solution because If I scroll down the page and select the datepicker, the datepicker will appear 300px below the field. I need something more dynamic.
-
Ankush Raghuvanshi almost 8 yearsFrom what I comprehend, the CALENDER box is appearing above the date-picker input field, but you want it to be displayed below it.? Is it so, or do you want something else?
-
Ankush Raghuvanshi almost 8 yearsOh i get the SCROLL problem you mentioned. And it persists in case of top-margin: 0px also and hence Jayanti Lal's solution ain't working as well.
-
Ankush Raghuvanshi almost 8 yearsCheck this out stackoverflow.com/questions/15131465/… The same as specified by @Deep
-
Maurice Twomey almost 8 yearsThank you, Ankush! I have marked @Deep's answer as the resolved answer.
-
Haroon Hassan almost 6 yearsThanks @Deep. Can you explain your use of setTimeout a bit more? Thanks.