Menu
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.
535
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");
}
});
});
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.
180
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
