将jquery datepicker位置设置为文本字段的顶部

Question

Jquery datepicker显示在测试字段下.有时它会在文本字段的顶部.但我希望将datepicker始终显示在测试字段的顶部.怎么做？

Answer 1

以下代码将日历始终位于输入字段的顶部.

$('.txtDate').datepicker({
   beforeShow: function (textbox, instance) {
       var txtBoxOffset = $(this).offset();
       var top = txtBoxOffset.top;
       var left = txtBoxOffset.left;
       var textBoxWidth = $(this).outerWidth();
       console.log('top: ' + top + 'left: ' + left);
               setTimeout(function () {
                   instance.dpDiv.css({
                       top: top-190, //you can adjust this value accordingly
                       left: left + textBoxWidth//show at the end of textBox
               });
           }, 0);

   }});

Answer 2

You can try this :


$('#txtDate').datepicker({
    beforeShow: function (textbox, instance) {
            instance.dpDiv.css({
                    marginTop: (-textbox.offsetHeight) + 'px',
                    marginLeft: textbox.offsetWidth + 'px'
            });
    }
});