jquery mobile 中的日期选择器在第二页中添加时是重复的
我需要一些有关移动应用程序中日期选择器使用的帮助。
我在我的应用程序中使用 jQuery UI 日期选择器。但是当我将日期选择器放在第二页时，它会显示两次（重复）。但是，当我将日期选择器放在第一页时，显示正常。
这是一个示例，如果您运行它，您可以看到日期选择器在第二页中重复。
<!DOCTYPE html>
<html>
<head>
<title>Datepicker Test</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css"/>
<link rel="stylesheet" href="http://jquerymobile.com/demos/1.0a3/experiments/ui-datepicker/jquery.ui.datepicker.mobile.css" />
<script src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script src="http://jquerymobile.com/demos/1.0a3/experiments/ui-datepicker/jQuery.ui.datepicker.js"></script>
<script src="http://jquerymobile.com/demos/1.0a3/experiments/ui-datepicker/jquery.ui.datepicker.mobile.js"></script>
<script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
</head>
<body>
<!-- Start of first page -->
<div data-role="page" id="firstPage">
<div data-role="header">
<h1>First page</h1>
</div><!-- /header -->
<div data-role="content">
<p><a href="#secondPage">Next page with a Datepicker</a></p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
<!-- Start of second page -->
<div data-role="page" id="secondPage">
<div data-role="header">
<h1>Second page</h1>
</div><!-- /header -->
<div data-role="content">
<label for="date">Date Input:</label>
<input type="date" name="date" id="date" value="" />
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /header -->
</div><!-- /page -->
</body>
</html>
感谢您提前帮助我。
I'm needing some help with the datepicker use in mobile app.
I'm using the jQuery UI datepicker in my app. But the datepicker is show twice (duplicate) when I put it in the second page. However when I put the datepicker in the first page, is shown ok.
This is an example, if you run it you can see that the datepicker is duplicate in second page.
<!DOCTYPE html>
<html>
<head>
<title>Datepicker Test</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css"/>
<link rel="stylesheet" href="http://jquerymobile.com/demos/1.0a3/experiments/ui-datepicker/jquery.ui.datepicker.mobile.css" />
<script src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script src="http://jquerymobile.com/demos/1.0a3/experiments/ui-datepicker/jQuery.ui.datepicker.js"></script>
<script src="http://jquerymobile.com/demos/1.0a3/experiments/ui-datepicker/jquery.ui.datepicker.mobile.js"></script>
<script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
</head>
<body>
<!-- Start of first page -->
<div data-role="page" id="firstPage">
<div data-role="header">
<h1>First page</h1>
</div><!-- /header -->
<div data-role="content">
<p><a href="#secondPage">Next page with a Datepicker</a></p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
<!-- Start of second page -->
<div data-role="page" id="secondPage">
<div data-role="header">
<h1>Second page</h1>
</div><!-- /header -->
<div data-role="content">
<label for="date">Date Input:</label>
<input type="date" name="date" id="date" value="" />
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /header -->
</div><!-- /page -->
</body>
</html>
Thanks for help me in advance.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
最后我们从我的一位项目经理那里得到了一个解决方案。我们必须在 jquery.ui.datepicker.mobile.js 中解决一项问题。
使用以下代码替换以下方法。
每次页面加载时都会调用上面的 pagecreate 函数。导航到下一页时将执行相同的日期选择器创建。因此，我们添加了一个条件，以便在页面加载期间仅执行此行一次。现在一切正常。
Finally we got a solution from one of my Project manager. We have to do one work around in jquery.ui.datepicker.mobile.js.
Replace the following method using below code.
The above function pagecreate will call every time page load. The same date picker creation ine will execute while navigating to next page. So we have added a condition to execute this line only one time during page load. Now it is working fine.
我们得到了这个工作，但它花了一些时间：
在新的移动 datepicker js 中，将 updateDatepicker() 函数移到覆盖的 fn.datepicker 函数的范围之外，以便可以在任何地方调用它并修改它以删除所有 'dp ' 范围如下：
函数 updateDatepicker(){
在 jquery.ui.datepicker.js 中添加对 updateDatepicker() 的调用；在 jquery.ui.datepicker.js 中的 _updateDatepicker 函数末尾
.ui-datepicker { 溢出：可见；保证金：0；最大宽度：500px；最小宽度：300px；宽度：50%； ：
将日期选择器绑定函数更改为如下所示：
//绑定到pagecreate以自动增强日期输入
$( ".ui-page" ).live( "pagecreate", function(){
$( "输入[类型='日期'], 输入[数据类型='日期']" ).each(function(){
$(this).datepicker({ altField: "#" + $(this).attr( "id" ), showOtherMonths: true });
});
});
We got this working but it took some faffing:
in the new mobile datepicker js, move the updateDatepicker() function outside the scope of the overriden fn.datepicker function so it can be called anywhere and modify it to remove all 'dp' scoping like so:
function updateDatepicker(){
in the jquery.ui.datepicker.js add a call to updateDatepicker(); at the end of the _updateDatepicker function
in the mobile datepicker css, change ui-datepicker class to look like:
.ui-datepicker { overflow: visible; margin: 0; max-width: 500px; min-width: 300px; width: 50%; }
change the datepicker bind function to look like this:
//bind to pagecreate to automatically enhance date inputs
$( ".ui-page" ).live( "pagecreate", function(){
$( "input[type='date'], input[data-type='date']" ).each(function(){
$(this).datepicker({ altField: "#" + $(this).attr( "id" ), showOtherMonths: true });
});
});
老帖子，但显然仍然相关。
我面临着同样的问题。这就是我所做的。解决方案是隐藏 hasDatepicker 类，并显示我想要的特定日期选择器 ID。
在 html 中，我将日期选择器包装在带有 Id 的 div 中：
在 js 中，我首先隐藏 hadDatepicker 类，然后显示我关心的类。
另一个可能的解决方案是仅隐藏 .hasDatepicker 的第二个时刻。我没有使用这种方法，因为时间是一个更大的问题。
Old post, but still relevant apparently.
I was faced with the same problem. Here's what I did. Solution was to hide the hasDatepicker class, and show the specific datepicker ID that I want.
In html, I wrap the date picker in a div with an Id:
In js, I first hide the hadDatepicker class, then show the one I care about.
Another potential solution is to only hide the second instant of .hasDatepicker. I didn't use this method, since timing is more of an issue.