jQuery DatePicker 在可滚动 div 中时不随 HTML 内容移动

2024-06-19

我的表单大小受到限制,并且溢出样式设置为滚动。该表单包含许多 DatePickers。如果我打开其中一个 DatePicker,然后滚动面板(使用滚轮将焦点保持在 DatePicker 上,使其保持打开状态),DatePicker 不会随其附加的表单字段一起移动。请参阅下面我的完整工作示例:

<html>
  <head>
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.datepicker.js"></script>
  </head>
  <body>
    <div style="width: 200px; height: 200px; overflow: scroll">
<script type="text/javascript">
  $(function() {  
    $('#datepicker').datepicker({   
       changeMonth: true, 
       changeYear: true, 
       showOn: 'button', 
       changeMonth: true, 
       changeYear: true, 
       buttonImageOnly: true, 
       dateFormat: 'dd M yy', 
       buttonText: 'Click'   
    });
  });
</script>
      <div class="demo">
        <p>Date: 
          <input type="text" id="datepicker">
        </p>
      </div>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
    </div>
  </body>
</html>

目前,日期选择器相对于浏览器窗口而不是触发器输入字段固定在适当的位置。当表单滚动时,任何人都可以帮助我保持 DatePicker 控件打开并位于相对于其触发器输入字段的同一位置吗?

Thanks

编辑:澄清了标题和情况说明。

编辑:修复了摘要文本


使用的完整解决方案是:

var dtPckr = $('#datepicker')

$(".demo").scroll(function() {
  dtPckr.datepicker('hide');
});

$(window).resize(function() {
  dtPckr.datepicker('hide');
});

这通过添加窗口调整大小处理程序来隐藏日期选择器来扩展 Nick C 发布的解决方案。这应该涵盖内容相对于显示的日期选择器移动的所有情况。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

jQuery DatePicker 在可滚动 div 中时不随 HTML 内容移动 的相关文章

随机推荐

  • 只获取倒数第二条记录 - mysql-query

    我有一个如下表记录 my table id rating description 1 0 0 bed 2 1 0 good 3 0 0 bed 4 1 0 good 5 0 0 bed 6 0 0 bed 7 0 0 bed 现在我通过评级
  • SSE:如何将 _m128i._i32[4] 减少到 _m128i._i8

    我对 SSE 编码非常陌生 我想将 int32 类型的 m128i 4 的结果存储到 int8 类型的 m128i 中 m128i j i32 k 的值均在 127 和 127 之间 我认为伪代码如下 result i8 vec1 i8 0
  • Ruby 在 Windows 上找不到 sqlite3 驱动程序

    我正在尝试在 Windows 上设置 Ruby on Rails 我正在使用看起来不错的 Flash Rails 发行版 但是 sqlite3 有一个问题 我发现线程告诉我安装版本 1 2 3 安装得很好 我使用的是 ruby 1 9 0
  • 程序堆栈真的会溢出吗?

    如果达到堆栈大小限制 处理器是否会导致操作系统出现 TRAP 从而防止堆栈溢出 P 我相信 Windows 确实有一个堆栈 当您到达末尾时它会增长 在 Visual Studio 编译器中 负责此操作的代码位于chkstk obj modu
  • C++11 容器/适配器属性的实用总结/参考? [关闭]

    Closed 这个问题是无关 help closed questions 目前不接受答案 我正在寻找各种 C 11 标准容器和容器适配器的重要属性的全面总结 参考 也可以选择包括 boost Qt 但是按这些属性索引而不是通常的每个容器文档
  • 辍学训练

    如何对由 dropout 产生的许多薄层进行平均 在测试阶段要使用哪些重量 我对这个问题真的很困惑 因为每个细化层都会学习一组不同的权重 那么反向传播是为每个稀疏网络单独完成的吗 这些细化网络之间的权重究竟是如何共享的 因为在测试时仅使用一
  • 在 ASP.NET 中动态设置主题

    我有一个连接到不同域的应用程序 我没有复制和修改每个应用程序 而是在硬盘驱动器上使用相同的物理位置 但在 IIS 上使用单独的应用程序池和网站 基本上我想根据主机名更改主题 IE 用户访问 websome com 获取 websome 主题
  • 在 ruby​​ 中创建登录会话时理解“current_user”概念

    我正在阅读很棒的 Michael Hartl 教程来构建 ruby 应用程序here http ruby railstutorial org chapters sign in sign out sec 3acurrent user 我试图理
  • 将具有子目录的域转发到具有子目录的其他域

    我有一个热爱域名的客户 更喜欢转发域名 其中许多域没有与其关联的网站 它们仅用于营销和转发 我知道如何轻松地将一个域转发到另一个域 但我好奇的是如何将这些域的特定 url 转发到其他特定 url 例如 www site1 com 目录 gt
  • Git 中的数据完整性?

    我现在已经多次听到提到 Git 提供数据完整性 但是 这是什么意思 据我所知 git 中的所有对象都是使用 SHA 1 校验和来访问的 并且该校验和是根据文件的内容计算的 这意味着如果文件发生更改 您将得到不同的校验和 但这如何提供数据完整
  • 切换按钮不适用于 AngularJS 和 Angular ui Bootstrap

    切换按钮出现 但不起作用 我现在在网上也有相同的代码 但它不起作用 但在 Plunker 中它可以工作 Plunker 切换按钮正在工作 http plnkr co edit R5F5D1FGyHiv9X1cfOoa p preview 在
  • 使用 LWP::Agent 的 Perl JSON::RPC::Client

    我被要求不使用 JSON RPC Client 而是使用 LWP 进行调用 这是我的代码 Server usr bin perl use strict use lib use ServerLib use JSON RPC Server Da
  • php将多维数组内爆为制表符分隔行

    我有一个多维数组 BlockData 其中有 13 个维度和 n 个数组元素 我需要将此数组内爆回单个长字符串 其中元素由 n 换行和尺寸由 t tabs 我尝试过使用array map 功能没有成功 需要帮助来完成此任务 请帮忙 这可以使
  • Heroku 应用程序上的 Nodejs Express EACCES 0.0.0.0:80

    我正在尝试在他们的网站上新创建的 Heroku 应用程序上运行 Node 应用程序 我按照他们的步骤操作 但在显示应用程序状态时仍然遇到错误 我跟着Node js 入门 https devcenter heroku com articles
  • Python:scikit learn 中正态分布的特征选择

    我有一个pandasDataFrame 其索引是唯一用户标识符 与唯一事件对应的列以及值 1 已参加 0 未参加 或 NaN 未受邀请 不相关 相对于 NaN 该矩阵相当稀疏 有数百个事件 而大多数用户最多只被邀请参加数十个 我创建了一些额
  • 函数地址不是实际代码地址

    在 Visual Studio 2008 C 中调试一些代码时 我注意到函数指针变量中的地址不是函数本身的实际地址 这是一个外部 C 函数 int main void printaddr const char print debug sho
  • AttributeError:tkagg没有属性cursord

    我最近重新安装了 anaconda 将目录从管理员帐户转移到我的个人帐户 以前 我对下面的代码没有任何问题 import matplotlib backends backend tkagg as tkagg defaultcursor tk
  • 如何在经历生命周期销毁时关闭 Activity?

    android 关闭 完成活动并仍希望其完成的方式是什么onPause onStop and onDestroy 我知道Activity finish 但这只能保证调用onDestroy 不是另外两个 原因 根据android文档 数据库访
  • Visual Studio 2013 中的内存分析

    我想探索如何在我的应用程序中分配内存 我有 C 控制台应用程序并使用 Visual Studio 2013 Professional I go to Analyze gt 性能和诊断并选择 NET内存分配 结果我得到以下总结 图表中每次CP
  • jQuery DatePicker 在可滚动 div 中时不随 HTML 内容移动

    我的表单大小受到限制 并且溢出样式设置为滚动 该表单包含许多 DatePickers 如果我打开其中一个 DatePicker 然后滚动面板 使用滚轮将焦点保持在 DatePicker 上 使其保持打开状态 DatePicker 不会随其附