日期选择器位置错误答案

【问题标题】：Datepicker in wrong position日期选择器位置错误
【发布时间】：2014-08-04 11:11:45
【问题描述】：

我正在开发一个 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>

【问题讨论】：

即使在 200 多台 PC 上也可以安装更新版本的 IE。没有安装限制。
您可能想要添加一个 CSS 标签，因为使用 CSS 可以轻松完成元素定位
也检查其他浏览器
@wumm：我假设 OP 不是系统管理员，有些公司有这种荒谬的 webdev 折磨政策来支持旧浏览器，并通过在这些浏览器上运行内部应用程序来强制执行这种疯狂，也。我曾在这样的地方工作过……因此仍然做噩梦

标签： javascript php jquery datepicker

【解决方案1】：

如果日期选择器是在容器内生成的，这不会有问题。看到这个

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

我使用 beforeShow 事件将日期选择器放在输入后面。

我使用了 position: relative;在可滚动容器上，以便绝对元素监听容器。

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

【讨论】：

问题似乎出在 CSS 上。如果我禁用它，它会完美运行。
我遇到了这个问题，但仅限于移动设备。只需添加一个容器/包装器 div 位置：相对；解决了这个问题，谢谢。

【解决方案2】：

尝试在日期选择器打开后调整它的位置（请根据您的要求调整位置）

<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">

【讨论】：

如果页面没有向下滚动，它会显示在它应该出现的位置。好像没有考虑到scrool。
没看懂在说什么，能否分享一下jsfiddle链接。
我没有使用 jsfiddle。只是记事本。看起来一样，只是有点感动。如果您查看原始喜欢的图像，您会发现它直接位于输入字段的上方，这是可以的。如果页面没有返回这么多结果，那么该位置将是正确的。
这就是我所说的，您需要根据您的要求调整位置。您需要操作 top 和 left 值。

【解决方案3】：

确保你得到了

<!DOCTYPE html>

在您的 html 输出的顶部。

【讨论】：

那是评论，不是答案。此外：这不会解决问题......我怀疑这甚至不是它的原因
我在代码后面有这个，在一些包含之后。如果我将它向上移动它会禁用我所有的 CSS 不知道为什么，一些标签可能不会被关闭。
@EliasVanOotegem 很好，它解决了我在 IE 中的很多 jQuery 显示问题。
@user3864308：？？？后面的代码？？？文档类型必须位于标记的最顶部！
它在包含 styles.css 和 connect.css 之后。如果我把它放在顶部它会禁用 css。如果我将其移至其他系统，则样式根本不起作用。我迷路了。

【解决方案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">

【讨论】：

【解决方案5】：

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

【讨论】：