添加在第二页的jquery mobile中的Datepicker是重复的

本文介绍了添加在第二页的jquery mobile中的Datepicker是重复的的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在应用程序中使用了jQuery UI datepicker，我需要一些帮助。但是当我把它放在第二页时，datepicker显示两次（重复）。但是，当我将datepicker放在第一页时，显示确定。

这是一个例子，如果你运行它，你可以看到datepicker在第二页是重复的。

 <！DOCTYPE html> 
< html> 
< head> 
< title> Datepicker测试< / title> 
< link rel =stylesheethref =http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css/> 
< link rel =stylesheethref =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> 
 
<！ - 第一页开始 - > 
< div data-role =pageid =firstPage> 
< div data-role =header> 
< h1>第一页< / h1> 
< / div><！ -  / header  - > 
 
< div data-role =content> 
< p>< a href =＃secondPage>具有Datepicker的下一页< / a>< / p> 
 
< / div><！ -  / content  - > 
 
< div data-role =footer> 
< h4>页脚< / h4> 
< / div><！ -  / footer  - > 
 
< / div><！ -  / page  - > 
 
<！ - 第二页开始 - > 
< div data-role =pageid =secondPage> 
< div data-role =header> 
< h1>第二页< / h1> 
< / div><！ -  / header  - > 
 
< div data-role =content> 
< label for =date>日期输入：< / label> 
< input type =datename =dateid =datevalue =/> 
< / div><！ -  / content  - > 
 
< div data-role =footer> 
< h4>页脚< / h4> 
< / div><！ -  / header  - > 
< / div><！ -  / page  - > 
 
< / body> 
< / html>

感谢您提前帮助我。

解决方案

最后，我们从我的项目经理之一获得了解决方案。我们必须在jquery.ui.datepicker.mobile.js中做一些工作。

使用以下代码替换以下方法。

  $（.ui-page）.live（pagecreate，function（）{
 $（input [type ='date'] ，输入[data-type ='date']）.each（function（）{
 if（$（this）.hasClass（hasDatepicker）== false）{
 $（this） .after（$（< div />）.datepicker（{altField：＃+ $（this）.attr（id），showOtherMonths：true}））; 
 $ ）.addClass（hasDatepicker）; 
} 
}）; 
}）;

上述功能pagecreate将在每次加载页面时调用。在导航到下一页的同时，执行相同的日期选择器创建。所以我们在页面加载期间添加了一个条件来执行这一行。现在工作正常。

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.

这篇关于添加在第二页的jquery mobile中的Datepicker是重复的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！