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

标签 jquery jquery-ui datepicker

我有一个使用 jQuery ui 日期选择器的多个实例的网页。我的网页将显示约 80 条记录,这超出了单个屏幕截图的范围。

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

我已将日期选择器的默认值设置如下:

    $(".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)

最佳答案

我也遇到了同样的问题,我使用的是 IE9,而是使用 document.documentElement.scrollTop 我在 JS 代码上编辑了以下行

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

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

关于jQuery ui datepicker向下滚动网页时定位问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2834857/

相关文章:

jQuery-UI 日期选择器只显示文本

javascript - 在全屏覆盖中打印文本?

jquery - 相当于 ajaxSend 和/或 ajaxComplete 与 jsonp?

javascript - Jqueryui Autocomplete 可以正常工作,但现在不行了

javascript - 禁用日期选择器上的日期的问题

javascript - 存在事件的单元格的 jQuery DatePicker 背景颜色(加载时)

jquery - Bootstrap DatePicker 使用 onRender 禁用许多日期

javascript - Ajax 响应上的 Jquery 选择器

android - 网站无法在移动设备和低分辨率PC显示器中正确显示

jquery - 如何在可调整大小的 div 中适应文本及其适当的大小..?