Force jQuery UI Datepicker to display below input field

后端 未结 4 1045
北恋
北恋 2021-02-15 23:15

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.
相关标签:
4条回答
  • 2021-02-15 23:51

    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 );

    0 讨论(0)
  • 2021-02-15 23:56

    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.

    0 讨论(0)
  • 2021-02-15 23:58

    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

    0 讨论(0)
  • 2021-02-16 00:10

    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/

    0 讨论(0)
提交回复
热议问题