当在第二页中添加时，jquery mobile 中的 Datepicker 是重复的 [英] Datepicker in jquery mobile is duplicate when is added in a second page
问题描述
我需要有关在移动应用中使用日期选择器的帮助.
I'm needing some help with the datepicker use in mobile app.
我在我的应用中使用了 jQuery UI 日期选择器.但是当我把它放在第二页时，日期选择器会显示两次(重复).但是，当我将日期选择器放在第一页时，显示正常.
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>
感谢您提前帮助我.
推荐答案
最后我们从我的一位项目经理那里得到了解决方案.我们必须在 jquery.ui.datepicker.mobile.js 中做一项工作.
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.
$( ".ui-page" ).live( "pagecreate", function(){
$( "input[type='date'], input[data-type='date']" ).each(function(){
if ($(this).hasClass("hasDatepicker") == false) {
$(this).after( $( "<div />" ).datepicker({ altField: "#" + $(this).attr( "id" ), showOtherMonths: true }) );
$(this).addClass("hasDatepicker");
}
});
});
每次页面加载时都会调用上面的函数pagecreate.导航到下一页时将执行相同的日期选择器创建 ine.所以我们添加了一个条件，在页面加载期间只执行一次这一行.现在一切正常.
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.
这篇关于当在第二页中添加时，jquery mobile 中的 Datepicker 是重复的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
