Question

我正在开发一个php应用程序，我使用了datepicker javascript。这个问题是，如果我向下滚动它不会出现在正确的位置。如果页面太长，日期选择器甚至不可见，那就非常糟糕了。

我正在使用IExplorer，它可能已经过时了。它不是更新浏览器的解决方案，因为这需要在200多台PC上运行

<script type="text/javascript" language="javascript">
$(function(){ $("#udate").datepicker({ dateFormat:'yy-mm-dd'}); });
</script>
<input type="text" id="udate" name="udate">

评论要求的代码

<style type="text/css">
html {
overflow-y: scroll;
}
body {
    size:8;
}
</style>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

Answer 1

如果在容器内生成了datepicker，这不会有问题。见这个

Solution: http://jsfiddle.net/jbK6a/15/

我使用beforeShow事件将datepicker放在输入后面。

我使用的位置：亲戚;在可滚动容器上，以便绝对元素监听容器。

或允许滚动列表并修复日期选择器。

Answer 2

确保你有

<!DOCTYPE html>

位于html输出的顶部。

Answer 3

尝试此方法调整日期选择卡打开后的位置（请根据您的要求调整位置）

<script type="text/javascript" language="javascript">
  $(function(){ 
        $("#udate").datepicker({ dateFormat:'yy-mm-dd'}); 
        // bind click event and adjust datepicker position.
        $(".hasDatepicker").click(function(e){
            $("#ui-datepicker-div").css({'top':e.pageY+20,'left':e.pageX-250});
        });
  });
</script>

<input type="text" id="udate" name="udate">

Answer 4

解决方案是答案的组合。首先，我做了norhkildonan所说的：

确保你有
<!DOCTYPE html>
位于html输出的顶部。

然后编辑了一下css，然后添加了Bhushan Kawadkar部分：

<script type="text/javascript" language="javascript">
  $(function(){ 
        $("#udate").datepicker({ dateFormat:'yy-mm-dd'}); 
        // bind click event and adjust datepicker position.
        $(".hasDatepicker").click(function(e){
            $("#ui-datepicker-div").css({'top':e.pageY+20,'left':e.pageX-250});
        });
  });
</script>

<input type="text" id="udate" name="udate">

Answer 5

对我有用的是在我需要它的地方添加“容器”类。

Datepicker位置错误

5 个答案: