Monday, May 20, 2024
Homepage · jquery
 Popular · Latest · Hot · Upcoming
81
rated 0 times [  88] [ 7]  / answers: 1 / hits: 20271  / 8 Years ago, fri, july 15, 2016, 12:00:00

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.

  2. 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!


More From » jquery
 Answers
22

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/


[#61355] Thursday, July 14, 2016, 8 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
alejandro
Add To Favorites
Follow
Total Points: 231
Total Questions: 102
Total Answers: 107
Location: Jordan
Member since Wed, Jun 17, 2020
4 Years ago
alejandro questions
Mon, Jul 18, 22, 00:00, 2 Years ago
Fri, Sep 18, 20, 00:00, 4 Years ago
Thu, Sep 10, 20, 00:00, 4 Years ago
Sun, Aug 9, 20, 00:00, 4 Years ago
Thu, May 21, 20, 00:00, 4 Years ago
View All
;