强制jQuery UI Datepicker在下面的输入字段中显示

问题描述：

我有一个页面，其中包含一个窗体和几个字段。我的问题如下：强制jQuery UI Datepicker在下面的输入字段中显示

我想强制jQuery UI datepicker显示在输入字段下面。
当我点击输入字段时，我希望字段也滚动到页面的顶部。我想我有这个工作。

这里是我的jQuery：

JQUERY：

$(document).ready(function() { 
    // Set Datepicker 
    $(".datepicker").datepicker(); 

    $("input").focus(function() { 
     $('html, body').animate({ scrollTop: $(this).offset().top - 25 }, 10); 
    }); 

});

链接到一个小提琴： https://jsfiddle.net/MauriceT/0qfycgm1/10/

这里是我想避免什么：

Datepicker displays above the input field

任何建议将不胜感激。谢谢！

下面的输入是什么意思？您是否希望输入字段覆盖日期选择器？ – Deep

所以我需要日期选择器来显示下面的字段，不管是什么。目前，如果您点击日期选择器并且字段上方有空格，则日期选择器将出现在该字段上方。点击我的问题图片中的链接以获得视觉效果。谢谢！ –

答

您可以通过设置日期选取器弹出窗口的CSS来实现您的目标。

使用下面的代码来设置CSS，使用setTimeout是为了避免重写CSS。

我在这里找到了上边和左边的日期时间选择器的文本框，并使用这些值来设置日期时间选择器弹出

论这里beforeShow事件检查信息的位置。

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

这里是小提琴：https://jsfiddle.net/0qfycgm1/14/

谢谢，深入！你是个天才！：） –

@MauriceTwomey不客气:) – Deep

答

一个简单的解决方法是使用CSS为CALENDER Box调整前端。

将以下内容添加到您的CSS文件。

.ui-datepicker{ 
     margin-top: 300px; 
    }

我在你的小提琴链接中试过，工作得很好。

感谢您的回应，Ankush！但是，我不确定这是一个强大的解决方案，因为如果向下滚动页面并选择日期选择器，日期选择器将出现在字段下方300px。我需要更动态的东西。 –

从我所了解的情况来看，CALENDER框出现在日期选择器输入字段的上方，但您希望它显示在其下方。是这样吗，还是你想要别的东西？ –

哦，我得到你提到的SCROLL问题。而且它在top margin：0px的情况下仍然存在，因此Jayanti Lal的解决方案也不能正常工作。 –

答

添加

 ui-datepicker{ 
      margin-top: 0px; 
      }

我加入这个代码到你的小提琴，并已进行了测试。希望这会有所帮助。已更新您的fiddle

答

继从jQuery的用户界面 - 代码行（版本）设置你的对象顶部位置是零，因此它显示wrong.Comment的代码行，你会得到你想要的。我花了很多天找到没有比这更好的解决方案。

offset = $ .datepicker._checkOffset（inst，offset，isFixed）;

强制jQuery UI Datepicker在下面的输入字段中显示

相关推荐