我需要一些有关移动应用程序中日期选择器使用的帮助。
我在我的应用程序中使用 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>
感谢您提前帮助我。
最后我们从我的一位项目经理那里得到了一个解决方案。我们必须在 jquery.ui.datepicker.mobile.js 中解决一项问题。
使用以下代码替换以下方法。
$( ".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 函数。导航到下一页时将执行相同的日期选择器创建。因此，我们添加了一个条件，以便在页面加载期间仅执行此行一次。现在一切正常。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
