Datepicker in jquery mobile is duplicate when is added in a second page

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.

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.

We got this working but it took some faffing:

in the new mobile datepicker js, move the updateDatepicker() function outside the scope of the overriden fn.datepicker function so it can be called anywhere and modify it to remove all 'dp' scoping like so:

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 the jquery.ui.datepicker.js add a call to updateDatepicker(); at the end of the _updateDatepicker function
in the mobile datepicker css, change ui-datepicker class to look like: .ui-datepicker { overflow: visible; margin: 0; max-width: 500px; min-width: 300px; width: 50%; }
change the datepicker bind function to look like this:

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

Old post, but still relevant apparently.

I was faced with the same problem. Here's what I did. Solution was to hide the hasDatepicker class, and show the specific datepicker ID that I want.

In html, I wrap the date picker in a div with an Id:

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

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

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

Another potential solution is to only hide the second instant of .hasDatepicker. I didn't use this method, since timing is more of an issue.

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

来源：https://stackoverflow.com/questions/4947412/datepicker-in-jquery-mobile-is-duplicate-when-is-added-in-a-second-page

标签

jquery

jquery-ui

datepicker

jquery-mobile

jquery-ui-datepicker