Question

我需要一些关于在移动应用中使用datepicker的帮助。

我在我的应用中使用jQuery UI datepicker。但是当我把它放在第二页时，datepicker显示两次（重复）。但是当我把datepicker放在第一页时，显示确定。

这是一个例子，如果你运行它，你会发现第二页中的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>

感谢您提前帮助我。

Answer 1

最后，我们得到了一位项目经理的解决方案。我们必须在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");
        }
    }); 
});

上面的函数pagecreate将在每次页面加载时调用。导航到下一页时，将执行相同的日期选择器创建过程。所以我们在页面加载期间只添加了一次执行此行的条件。现在工作正常。

Answer 2

我们得到了这个工作，但它花了一些时间：

在新的移动日期选择器js中，将updateDatepicker（）函数移到覆盖fn.datepicker函数的范围之外，以便可以在任何地方调用它并修改它以删除所有'dp'范围，如下所示：

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() ); 
      });
};

在jquery.ui.datepicker.js中添加对updateDatepicker（）的调用;在_updateDatepicker函数的末尾
，将ui-datepicker类更改为： .ui-datepicker {overflow：visible;保证金：0;最大宽度：500px;最小宽度：300px;宽度：50％; }
将datepicker绑定函数更改为如下所示：

//绑定到pagecreate以自动增强日期输入
$（“.ui-page”）。live（“pagecreate”，function（）{
$（“input [type ='date']，输入[data-type ='date']”）.each（function（）{ $（this）.datepicker（{altField：“＃”+ $（this）.attr（“id”），showOtherMonths：true}）; }）; }）;

Answer 3

老帖子，但显然仍然相关。

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

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

的div中

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

在js中，我先隐藏hadDatepicker类，然后显示我关心的那个。

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

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

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

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

3 个答案: