当在第二个页面中添加时，jquery mobile中的Datepicker是重复的_Jquery_Jquery Ui_Datepicker_Jquery Mobile_Jquery Ui Datepicker

当在第二个页面中添加时，jquery mobile中的Datepicker是重复的

jquery jquery-ui jquery-mobile

当在第二个页面中添加时，jquery mobile中的Datepicker是重复的,jquery,jquery-ui,datepicker,jquery-mobile,jquery-ui-datepicker,Jquery,Jquery Ui,Datepicker,Jquery Mobile,Jquery Ui Datepicker,我需要一些在移动应用程序中使用datepicker的帮助我正在应用程序中使用jQuery UI日期选择器。但是当我把日期选择器放在第二页时，它显示了两次（重复）。但是，当我将日期选择器放在第一页时，显示的是ok 这是一个示例，如果您运行它，您可以看到datepicker在第二页中是重复的 <!DOCTYPE html> <html> <head> <title>Datepicker Test</title> &

我需要一些在移动应用程序中使用datepicker的帮助

我正在应用程序中使用jQuery UI日期选择器。但是当我把日期选择器放在第二页时，它显示了两次（重复）。但是，当我将日期选择器放在第一页时，显示的是ok

这是一个示例，如果您运行它，您可以看到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");
        }
    }); 
});

$（“.ui页面”）.live（“页面创建”，函数（）{
$（“输入[type='date']，输入[data type='date']）。每个（函数（）{
if（$（this）.hasClass（“hasDatepicker”）==false）{
$（this）.after（$（“”）.datepicker（{altField:“#”+$（this.attr（“id”），showOtherMonths:true}）；
$（this.addClass（“hasDatepicker”）；
}
}); 
});

上述函数pagecreate将在每次加载页面时调用。导航到下一页时，将执行相同的日期选择器创建。因此，我们添加了一个条件，在页面加载期间只执行一次这一行。现在它工作得很好。

我们完成了这项工作，但需要一些改进：

在新的mobile datepicker js中，将updateDatepicker（）函数移到覆盖的fn.datepicker函数的范围之外，以便可以在任何地方调用它，并对其进行修改以删除所有“dp”作用域，如下所示：

函数updateDatepicker（）{

在jquery.ui.datepicker.js中，在_updateDatepicker函数的末尾添加对updateDatepicker（）的调用

在mobile datepicker css中，将ui datepicker类更改为： .ui日期选择器{溢出：可见；边距：0；最大宽度：500px；最小宽度：300px；宽度：50%；}

将datepicker绑定函数更改为如下所示：

//绑定到pagecreate以自动增强日期输入
$（“.ui页面”）.live（“页面创建”，函数（）{
$（“输入[type='date']，输入[data type='date']）。每个（函数（）{ $（this.datepicker（{altField:“#”+$（this.attr（“id”），showOtherMonths:true}）； }); }))

旧帖子，但显然仍然相关

我也遇到了同样的问题。下面是我所做的。解决方法是隐藏hasDatepicker类，并显示我想要的特定datepicker ID

在html中，我将日期选择器包装在一个带有Id的div中：

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

另一个可能的解决方案是只隐藏.hasDatepicker的第二个瞬间。我没有使用这种方法，因为时间是一个更大的问题

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

老实说，jQuery mobile是一个非常实验性的项目，仍然有很多错误。这不是一个答案，但应该会有所帮助-无论你做什么，如果你在每个html文件中保留一个

page

div，它都会工作得更好。widget在这方面存在问题，而且多页html文件在JQM alpha2和alpha3之间的处理方式不同-它打破了我的自定义widget另外，我还发现了一个隐藏的jQuery库：这是jQuery UI小部件。不知道这是否有助于解决多日期选择器布局问题，但仍希望隐藏/显示焦点：

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

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