Question

我有一个网页，它使用jQuery ui datepicker的多个实例。我的网页将显示约80条记录，这些记录超出了单个屏幕截图。

<% foreach (var record in Model) { %>
    <div class="recordname"><%=record.name%></div>
    <%=Html.TextBox("DateTimePicker", null, new { @class = "date-pick" } )%>
    // <-- additional html here -->
<% } %>

我已将datepicker的默认值设置如下：

    $(".date-pick").each(function() {
    $(this).datepicker({
        dateFormat: 'dd M yy',
        showOn: 'button',
        buttonImage: '/Images/datepickericon.png',
        buttonImageOnly: true
        });
    });

当页面首次加载时，如果我点击屏幕上可见的任何日期选择器图标（即没有滚动），则日期选择器会按预期显示。

但是，如果我向下滚动页面然后单击一个日期选择器图标，则日期选择器不会出现在屏幕窗口中，而是会在屏幕顶部附近向右渲染。

任何想法如何解决这个问题？

我正在使用：

IE7
asp.net mvc
jquery.ui.datepicker.js（UI / API / 1.8 / Datepicker）

Answer 1

我也有同样的问题，我正在使用IE9，而是使用document.documentElement.scrollTop我编辑了我的JS代码中的以下行

$.datepicker._pos[1] += input.offsetHeight + document.body.scrollTop;

这是因为document.documentElement.scrollTop返回0，对我来说上面的代码解决了我的问题

Answer 2

我想我已经设法解决了我的问题但同时我想我可能在jquery ui datepicker代码中发现了一个错误（？）。

在我走得更远之前，请允许我说我是jquery / javascript的新手，并感谢下面的任何输入。

回顾一下这个问题，我正在使用asp.net mvc，我试图在页面上显示约80个日期选择器。对于初始视口中的任何日期选择器，日期选择器位置正常。但是，当我向下滚动时，日期选择器仍会呈现在屏幕顶部附近。

我开始查看源代码并进行一些调试。我注意到，日期选择器向屏幕顶部偏移的程度与我滚动的数量成正比，即更多的滚动=更大的偏移量。

我找到的代码中的关键问题（见下文）是，当代码找出定位日期选择器的位置时，它不会考虑用户滚动屏幕的距离：

_showDatepicker: 
function(input) { 
      input = input.target || input;
      //....more code...

      if (!$.datepicker._pos) { // position below input
      $.datepicker._pos = $.datepicker._findPos(input);
      $.datepicker._pos[1] += input.offsetHeight; //add the height
       }

在最后一行中，offsetHeight方法没有考虑你在屏幕上滚动了多少。

如果您将此行更新为以下内容，则可解决我提出的问题：

  $.datepicker._pos[1] += input.offsetHeight + document.documentElement.scrollTop; //add the height

这只是获取滚动条位置并将其添加到offsetHeight以获得正确的位置。

为了充分披露，我不确定为什么会这样，并且会欣赏一些见解。

我在这个问题上花了大约3天时间研究网络，这是我能想到的最好的。

有趣的是，jquery论坛中有类似的查询：

Click here to view

阅读报告似乎表明该错误已在先前版本中修复为1.8？

由于

Answer 3

我在IE 9中也遇到过这些问题，对你的集体帮助不够感谢。 Chrome 22.0.1229.94 m和FF 15.0.1没有为我显示此问题。

我首先尝试使用元标记强制IE 8仿真

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />

无济于事。

然后我按照建议编辑 jquery.ui.datepicker.js 文件，通过计算滚动来调整位置高度。这也不起作用。

最后我从

改变了我的doctype

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

到

<!DOCTYPE html>

成功运作!!

我删除了强制IE 8仿真的元标记，但保留了对datepicker js文件所做的更改。我的成功可能是编辑过的js和doctype的变化，或者只是doctype的变化。

Answer 4

我在jQuery UI版本1.9.2和IE9中遇到了同样的问题。

jQuery UI中似乎有一个名为_checkOffset的函数可以解决这个问题。它不起作用。

它尝试使用$(document).scrollTop()，它似乎总是在IE9中返回0。当jQuery函数返回零时，我不得不改变函数的内容以使用document.body.scrollTop。因此，取代

$(document).scrollTop()

带

($(document).scrollTop()||document.body.scrollTop)

在_checkOffset中的任何地方，以“修复”jQuery UI并使其正常工作。

Answer 5

在Jquery.UI中，只需更新_checkOffset函数，以便在返回offset之前将viewHeight添加到offset.top。 脚本： datepicker.js

_checkOffset: function(inst, offset, isFixed) {
     var dpWidth = inst.dpDiv.outerWidth();
     var dpHeight = inst.dpDiv.outerHeight();
     var inputWidth = inst.input ? inst.input.outerWidth() : 0;
     var inputHeight = inst.input ? inst.input.outerHeight() : 0;
     var viewWidth = document.documentElement.clientWidth + (isFixed ? 0 : $(document).scrollLeft());
     var viewHeight = document.documentElement.clientHeight + (isFixed ? 0 : ($(document).scrollTop()||document.body.scrollTop));

     offset.left -= (this._get(inst, "isRTL") ? (dpWidth - inputWidth) : 0);
     offset.left -= (isFixed && offset.left === inst.input.offset().left) ? $(document).scrollLeft() : 0;
     offset.top -= (isFixed && offset.top === (inst.input.offset().top + inputHeight)) ? ($(document).scrollTop()||document.body.scrollTop) : 0;

     // now check if datepicker is showing outside window viewport - move to a better place if so.
     offset.left -= Math.min(offset.left, (offset.left + dpWidth > viewWidth && viewWidth > dpWidth) ?
                Math.abs(offset.left + dpWidth - viewWidth) : 0);
     offset.top -= Math.min(offset.top, (offset.top + dpHeight > viewHeight && viewHeight > dpHeight) ?
                Math.abs(dpHeight + inputHeight) : 0);
     offset.top = offset.top + viewHeight;

     return offset;
},

Answer 6

我不确定这是不是问题，但你是以非标准方式附加日期选择器。您不需要使用.each（）;

进行迭代

$("input.date-pick").datepicker({
    dateFormat: 'dd M yy',
    showOn: 'button',
    buttonImage: '/Images/datepickericon.png',
    buttonImageOnly: true
});

此外，您应该尽可能在标签选择器前放置标签名称，因为它会加快选择过程。

Answer 7

我在我正在处理的应用上遇到了同样的问题并找到了解决方案。该应用程序未包含正确的doc-type规范，所需的只是将其添加到页面顶部。

<!DOCTYPE html>

希望这有帮助。

Answer 8

嘿，这是一个可以用来解决这个问题的黑客。

$(".ui-datepicker-trigger").on("click", function() {
var self;
if ($.browser.msie) {
self = $(this);
$("#ui-datepicker-div").hide();
setTimeout(function(){
$("#ui-datepicker-div").css({
top: self.offset().top + $('html').scrollTop() + 30
});
$("#ui-datepicker-div").show();
}, 0); 
}
});

尝试一下它对我有用：）

Answer 9

首先转到此处，然后在Javascript Beautifier

中格式化您的js文件

然后转到第445行

k = k + document.body.scrollTop;
change this line as 
k = k ;

Answer 10

这对我有用：

beforeShow: function(input, inst) {
    inst.dpDiv.css({
    marginTop: $('body').scrollTop() + 'px'
});

所以最终的代码是：

$(this).datepicker({
    dateFormat: 'dd M yy',
    showOn: 'button',
    buttonImage: '/Images/datepickericon.png',
    buttonImageOnly: true,
    beforeShow: function(input, inst) {
        inst.dpDiv.css({
            marginTop: $('body').scrollTop() + 'px'
        });
    }
});

Answer 11

可以通过添加以下代码使Datepicker-UI弹出窗口可拖动：

<强> $（ '＃UI-日期选择器-DIV'）可拖动（）;

由于此ID适用于为页面上的所有弹出日期选择器创建的组件div。虽然：

<强> $（ “UI-日期选择器”）。可拖动（）

适用于页面上的所有日期选择器（无论是弹出式还是内联式）。通过使面板可拖动，您通常可以将日期选择器定位在您想要的位置而无需滚动。

向下滚动网页时jQuery ui datepicker定位问题

11 个答案: