jquery mobile中的日期选择器在第二页中添加时重复
Posted
技术标签:
【中文标题】jquery mobile中的日期选择器在第二页中添加时重复【英文标题】：Datepicker in jquery mobile is duplicate when is added in a second page 【发布时间】：2011-06-24 06:16:49 【问题描述】：我需要一些关于在移动应用中使用日期选择器的帮助。
我在我的应用程序中使用 jQuery UI 日期选择器。但是当我将日期选择器放在第二页时，它会显示两次（重复）。但是，当我将日期选择器放在第一页时，显示正常。
这是一个例子，如果你运行它，你可以看到日期选择器在第二页是重复的。
<!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 mobile 是一个非常实验性的项目，仍然有很多错误 这不是一个答案，但应该有所帮助 - 无论你做什么，如果你在每个 html 文件中保留一个page div，它会更好。小部件有问题，多页 html 文件在 JQM alpha2 和 alpha3 之间的处理方式不同 - 它也破坏了我的自定义小部件。
我还发现了一个隐藏的 jQuery 库：jquerymobile.com/test/js，它是 jQuery UI 小部件。不知道这是否有帮助
【参考方案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 将在每次页面加载时调用。导航到下一页时将执行相同的日期选择器创建程序。所以我们添加了一个条件，在页面加载期间只执行一次这一行。现在它工作正常。
【讨论】：
感谢这修复了多日期选择器布局问题，但仍希望隐藏/显示焦点：***.com/questions/5005565/…【参考方案2】：我们完成了这项工作，但花了一些时间：
在新的移动 datepicker js 中，将 updateDatepicker() 函数移到覆盖的 fn.datepicker 函数的范围之外，以便可以在任何地方调用它并修改它以删除所有 'dp' 范围，如下所示：
函数 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 函数的末尾
在移动日期选择器 css 中，将 ui-datepicker 类更改为如下所示： .ui-datepicker 溢出：可见；边距：0；最大宽度：500px；最小宽度：300px；宽度：50%；
将 datepicker 绑定函数更改为如下所示：
//绑定到pagecreate以自动增强日期输入 $( ".ui-page" ).live( "pagecreate", function() $("input[type='date'], input[data-type='date']").each(function() $(this).datepicker( altField: "#" + $(this).attr("id"), showOtherMonths: true ); ); );
【讨论】：
【参考方案3】：旧帖子，但显然仍然相关。
我也遇到了同样的问题。这就是我所做的。解决方案是隐藏 hasDatepicker 类，并显示我想要的特定日期选择器 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中的日期选择器在第二页中添加时重复的主要内容，如果未能解决你的问题，请参考以下文章
如何在第二页中使用 localStorage 显示第一页的内容