我需要一些有关在移动应用程序中使用日期选择器的帮助。
我在我的应用程序中使用 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将在每次页面加载时调用。导航到下一页时将执行相同的日期选择器创建 ine。所以我们添加了一个条件，在页面加载期间只执行一次这一行。现在它工作正常。