我需要一些帮助在移动应用程序中使用datepicker.
我在我的应用程序中使用jQuery UI datepicker.但是当我把它放在第二页时,datepicker会显示两次(重复).但是,当我将datepicker放在第一页时,显示确定.
这是一个示例,如果您运行它,您可以看到日期选择器在第二页中是重复的.
<!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将在每次页面加载时调用.导航到下一页时,将执行相同的日期选择器创建过程.所以我们在页面加载期间只添加了一次执行此行的条件.现在它工作正常.
