Force jQuery UI Datepicker to display below input field

Question

I have a page which contains a form and few fields. My issues are as follow:

1. I am trying to force jQuery UI datepicker to display below the input field.

Answer 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/