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:

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!

what do you meant by below the input ? Do you want the input field to overlay over the date picker ? — Deep
– Deep, Commented Jul 15, 2016 at 15:13
So I need the datepicker to display below the field no matter what. At the moment, If you click on the datepicker and there is space above the field, the datepicker will appear above the field. Click the link in the image of my question for a visual. Thanks! — Maurice Twomey
– Maurice Twomey, Commented Jul 15, 2016 at 15:19

Deep · Accepted Answer · 2016-07-15 17:20:29Z

17

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/

edited Jul 15, 2016 at 17:20

answered Jul 15, 2016 at 16:06

Deep

9,7962 gold badges24 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Haroon Hassan Over a year ago

Thanks @Deep. Can you explain your use of setTimeout a bit more? Thanks.

Ankush Raghuvanshi · Accepted Answer · 2016-07-15 15:14:38Z

1

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.

answered Jul 15, 2016 at 15:14

Ankush Raghuvanshi

1,44212 silver badges18 bronze badges

5 Comments

Maurice Twomey Over a year ago

Thanks 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 Over a year ago

From 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 Over a year ago

Oh 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 Over a year ago

Check this out stackoverflow.com/questions/15131465/… The same as specified by @Deep

Maurice Twomey Over a year ago

Thank you, Ankush! I have marked @Deep's answer as the resolved answer.

Jayanti Lal · Accepted Answer · 2016-07-15 15:59:04Z

1

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

edited Jul 15, 2016 at 15:59

answered Jul 15, 2016 at 15:52

Jayanti Lal

1,1836 silver badges19 bronze badges

Comments

Pashupati Khanal · Accepted Answer · 2017-09-12 11:45:46Z

0

Following line of code from jquery-ui-(version) sets your object top position to be zero so it is displayed wrong.Comment the line of code you will get what you want. I spend lots of days found no better solution than this.

offset = $.datepicker._checkOffset( inst, offset, isFixed );

answered Sep 12, 2017 at 11:45

Pashupati Khanal

7433 silver badges11 bronze badges

Collectives™ on Stack Overflow

Force jQuery UI Datepicker to display below input field

4 Answers 4

1 Comment

5 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related