Geek Answers Handbook

Datepicker in jquery mobile is duplicated when added on second page

I need help using datepicker in a mobile application.

I am using jQuery UI datepicker in my application. But the datepicker is displayed twice (duplicate) when I put it on the second page. However, when I put the datepicker on the first page, it displays fine.

This is an example, if you run it, you will see that the date picker is duplicated on the 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 helping me in advance.

+7
source share
3 answers

Finally, we got a solution from one of my project managers. We need to do one job in jquery.ui.datepicker.mobile.js.

Replace the following method using the code below.

 $( ".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 pagecreate function will call every page load. The same ine date picker will be executed when navigating to the next page. Thus, we added a condition for this line to be executed only once during page loading. Now it works fine.

+14
source

We got this job, but it took some disappointment:

  • in the new mobile datepicker js, move the updateDatepicker () function outside the overriden fn.datepicker function so that it can be called anywhere and modified to remove all areas of the "dp" like this:

    function updateDatepicker () {

      $( ".ui-datepicker-header"/* , dp */ ).addClass("ui-body-c ui-corner-top").removeClass("ui-corner-all"); $( ".ui-datepicker-prev, .ui-datepicker-next"/* , dp */ ).attr("href", "#"); $( ".ui-datepicker-prev"/* , dp */ ).buttonMarkup({iconpos: "notext", icon: "arrow-l", shadow: true, corners: true}); $( ".ui-datepicker-next"/* , dp */ ).buttonMarkup({iconpos: "notext", icon: "arrow-r", shadow: true, corners: true}); $( ".ui-datepicker-calendar th"/* , dp */ ).addClass("ui-bar-c"); $( ".ui-datepicker-calendar td"/* , dp */ ).addClass("ui-body-c"); $( ".ui-datepicker-calendar a"/* , dp */ ).buttonMarkup({corners: false, shadow: false}); $( ".ui-datepicker-calendar a.ui-state-active"/* , dp */ ).addClass("ui-btn-active"); // selected date $( ".ui-datepicker-calendar a.ui-state-highlight"/* , dp */ ).addClass("ui-btn-up-e"); // today"s date $( ".ui-datepicker-calendar .ui-btn"/* , dp */ ).each(function(){ var el = $(this); // remove extra button markup - necessary for date value to be interpreted correctly el.html( el.find( ".ui-btn-text" ).text() ); }); };

  • in jquery.ui.datepicker.js add a call to updateDatepicker (); at the end of the _updateDatepicker function

  • in mobile datepicker css, change the ui-datepicker class as follows: .ui-datepicker {overflow: visible; margin: 0; maximum width: 500 pixels; min-width: 300 pixels; width: 50%; }

  • change the datepicker binding function to look like this:

    // bind to pagecreate to automatically increase date input
    $ (".ui-page") .live ("pagecreate", function () {
    $ ("input [type = 'date'], input [data-type = 'date']") .each (function () {$ (this) .datepicker ({altField: "#" + $ (this). attr ("id"), showOtherMonths: true});}); });

0
source

Old post, but still relevant.

I ran into the same problem. Here is what I did. The solution was to hide the hasDatepicker class and show the specific datepicker identifier I want.

In html, I end the date picker in a div with id:

 <div id="pick"><input data-role="date"></div>

In js, I first hide the hasDatepicker class, and then show the one I care about.

 $(document).on("pageinit", "#mypage", function() { $(".hasDatepicker").hide(); $("#pick").datepicker({}); $("#pick").show(); });

Another potential solution is to hide the second .hasDatepicker moment. I did not use this method since time is more related to the problem.

 $(".hasDatepicker:eq(1)").hide();
0
source

More articles:


All Articles