jQuery Mobile – >覆盖jQuery UI Datepicker – >布局已损坏

我在我的Web应用程序中使用jQuery Mobile。 有一个datepicker会覆盖默认的jQuery UI datepicker。

以下是来源： https ： //github.com/jquery/jquery-mobile/tree/master/experiments/ui-datepicker

覆盖它的JavaScript文件位于： https ： //github.com/jquery/jquery-mobile/blob/master/experiments/ui-datepicker/jquery.ui.datepicker.mobile.js

我有这行代码：

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

在这种情况下，我得到一个始终可见的日期选择器。 要仅在用户单击日期文本字段时才具有可见性，必须将datepicker连接到输入字段，这不是这种情况。 所以我必须删除.after("

") 。 但是，日期选择器的设计完全被破坏了，似乎日期选择器的重写没有生效，因为没有应用CSS样式。

那么，这里有什么不对？

提前谢谢你和最诚挚的问候。

Answer 1

要修复日历问题，您只需要更改Squish代码中的选择器

  $( '.ui-datepicker-calendar a' ).live('click', function() { $( '.hasDatepicker' ).hide('slow'); }); 

这里的例子

在对话框中创建它也很简单，只需将它放在另一个html中并像这样调用它

 Open dialog 

对话文档

Answer 2

这是我的解决方案

 $( ".ui-page" ).live( "pagecreate", function(){ $( "input[type='date'], input:jqmData(type='date')" ).each(function(){ $(this).after( $( "
" ).datepicker({ altField: "#" + $(this).attr( "id" ), showOtherMonths: true }) ); }); $('.hasDatepicker').hide(); $( "input[type='date'], input:jqmData(type='date')" ).click(function(){ $(this).next('.hasDatepicker').show(); }) $( '.ui-datepicker-calendar a' ).live('click', function() { $( '.hasDatepicker' ).hide('slow'); }); }); 

Answer 3

你是对的，我为第一次没有正确实施它而道歉。

这应该可以解决您的问题：

它将在加载时隐藏您的日历，在输入处于焦点（单击或标签到）时显示它，并在选择日期后立即再次隐藏它（但不会干扰切换月份）。

 $(function() { $( '.hasDatepicker' ).hide(); $( '#date' ).focus(function() { $( '.hasDatepicker' ).show('slow'); }); $( '.ui-body-c a' ).live('click', function() { // .live() event important //or else clicks stop functioning //after first selection $( '.hasDatepicker' ).hide('slow'); }); }); 

这是现场的例子

Answer 4

我在同一页面中有两个日期选择器的问题。 这是我的解决方案：

HTML代码：

1. 这是在Safari浏览器中测试的。
2. 检查日期输入元素。
3. 看看，在

   。 有一个新的DIV是在dinamically创建并具有此ID =“dp1298574069963”。 我在变量中捕获了它（ var idDivStart = $("#startPicker div").attr("id"); ）并使用它变量来指定将显示具有ui-datepicker类的Div内的所有元素（ $("#"+idDivStart+" .ui-datepicker").show(); ）。

JS代码：

 $(function() { $(".ui-datepicker").hide(); // startDate datepicker var idDivStart = $("#startPicker div").attr("id"); $("#startDate").focus(function() { $("#"+idDivStart+" .ui-datepicker").show(); }); // endDate datepicker var idDivEnd = $("#endPicker div").attr("id"); $("#endDate").focus(function() { $("#"+idDivEnd+" .ui-datepicker").show(); }); // $(".ui-datepicker-calendar a").live("click", function() { $(".ui-datepicker").hide(); }); // $(".inputsText").focus(function() { $(".ui-datepicker").hide(); }); // $("div").attr("tabindex",-1).focus(function() { $(".ui-datepicker").hide(); }); }); 

我希望能帮助你。

Answer 5

移动datepicker的作者在他的git页面上有一个function实例。

它隐藏了日期选择器并按预期显示输入框。 您的实施与标准之间究竟有什么区别？ 你能给出你正在做的事情的工作片段吗？ 如果您觉得这样更容易，可以在JSBin上标记它。

Answer 6

我有一个类似的问题，使用两个日期，这工作：

标记（C＃MVC3）：

  
 <%: Html.LabelFor(model => model.fooDate1) %> <%: Html.TextBox("fooDate1", Model == null ? Customer.GetLocalTime().ToString("d") : Model.fooDate1.ToString("d"), new Dictionary{{"type", "date"}, {"id", "fooDate1"}})%> <%: Html.ValidationMessageFor(model => model.fooDate1)%> 
 
 <%: Html.LabelFor(model => model.fooDate2) %> <%: Html.TextBox("fooDate2", Model != null ? Model.fooDate2 : null, new Dictionary{{"type", "date"}, {"id", "fooDate2"}})%> <%: Html.ValidationMessageFor(model => model.fooDate2) %>  

脚本：