javascript jQuery Mobile -> 覆盖 jQuery UI Datepicker -> 布局损坏

jQuery Mobile -> Override jQuery UI Datepicker -> Layout broken

提问by Tim

I am using jQuery Mobile in my web application. There is a datepicker which overrides the default jQuery UI datepicker.

我在我的 Web 应用程序中使用 jQuery Mobile。有一个日期选择器可以覆盖默认的 jQuery UI 日期选择器。

Here is the source: https://github.com/jquery/jquery-mobile/tree/master/experiments/ui-datepicker

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

The JavaScript file which overrides it, is here: https://github.com/jquery/jquery-mobile/blob/master/experiments/ui-datepicker/jquery.ui.datepicker.mobile.js

覆盖它的 JavaScript 文件在这里：https: //github.com/jquery/jquery-mobile/blob/master/experiments/ui-datepicker/jquery.ui.datepicker.mobile.js

I have this line of code:

我有这行代码：

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

In this case, I get a datepicker which is always visible. To have the visibility only if a user clicks into a date text field, the datepicker must be connected to the input field, which is here not the case. So I have to delete the .after("<div />"). But then, the design of the datepicker is totally broken, it seems that the rewrite of the datepicker does not take effect, because the CSS styles are not applied.

在这种情况下，我得到一个始终可见的日期选择器。要仅在用户单击日期文本字段时才可见，日期选择器必须连接到输入字段，但此处并非如此。所以我必须删除.after("<div />"). 但是后来，datepicker的设计完全被破坏了，似乎datepicker的重写没有生效，因为没有应用CSS样式。

So, what's wrong here?

那么，这里有什么问题呢？

Thank you in advance & Best Regards.

提前致谢并致以最诚挚的问候。

采纳答案by Blowsie

To fix the calendar problem you just need to change a selector in Squish's code

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

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

Example Here

示例在这里

Creating this in a dialog is simple too, just put it in another html and call it like so

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

<a href="foo.html" data-rel="dialog">Open dialog</a> 

Dialog Documentation

对话文档

回答by Swap

This was my solution

这是我的解决方案

$( ".ui-page" ).live( "pagecreate", function(){     
    $( "input[type='date'], input:jqmData(type='date')" ).each(function(){
        $(this).after( $( "<div />" ).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');
      });
});

回答by Yaz

I had the same issue with two datepickers in the same page. This was my solution:

我在同一页面中使用两个日期选择器时遇到了同样的问题。这是我的解决方案：

HTML code:

HTML代码：

<div data-role="fieldcontain">
   <div id="startPicker">
      <input type="date" name="startDate" id="startDate" value=""/>
   </div>
   <div id="endPicker">
     <input type="date" name="endDate" id="endDate" value=""/>
   </div>    

</div>

1. This was tested in Safari browser.
2. Inspect the date input element.
3. Look that, inside the <div data-role="fieldcontain" ...>. there is a new DIV that was created dinamically and has this id="dp1298574069963". I captured it in a variable (var idDivStart = $("#startPicker div").attr("id");) and use it variable to specify that all elements inside that Div that has the ui-datepicker class will be shown ($("#"+idDivStart+" .ui-datepicker").show();).

1. 这是在 Safari 浏览器中测试的。
2. 检查日期输入元素。
3. 看那个，里面<div data-role="fieldcontain" ...>。有一个动态创建的新 DIV，其 id="dp1298574069963"。我在变量 ( var idDivStart = $("#startPicker div").attr("id");) 中捕获它并使用它变量来指定将显示该 Div 中具有 ui-datepicker 类的所有元素 ( $("#"+idDivStart+" .ui-datepicker").show();)。

JS code:

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

I hope to help you.

我希望能帮助你。

回答by Squish

You were correct, I apologize for not properly implementing it the first time.

你是对的，我很抱歉第一次没有正确实施它。

This should fix your issue:

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

It will hide your calendar on load, show it when the input is in focus (clicked on or tabbed to) and hide it again as soon as a date is selected (but will not interfere with switching months).

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

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

Here is the example live

这是现场示例

回答by Squish

The author of mobile datepicker has a functioning example on his git page.

mobile datepicker 的作者在他的 git 页面上有一个功能示例。

It hides the datepicker and displays an input box as intended. What exactly is the difference between your implementation and the standard? Can you give a working snippet of what you're doing? You can mark it up on JSBinif you feel that'll be easier.

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

回答by Livewire

I had a similar problem working with two dates and this worked:

我在处理两个日期时遇到了类似的问题，这很有效：

Markup (C# MVC3):

标记（C# MVC3）：

    <div data-role="fieldcontain" id="fooDate1Div">
        <%: Html.LabelFor(model => model.fooDate1) %>
        <%: Html.TextBox("fooDate1", Model == null ? Customer.GetLocalTime().ToString("d") : Model.fooDate1.ToString("d"), new Dictionary<string, object>{{"type", "date"}, {"id", "fooDate1"}})%>
        <%: Html.ValidationMessageFor(model => model.fooDate1)%>
    </div>

    <div data-role="fieldcontain" id="fooDate2Div">
        <%: Html.LabelFor(model => model.fooDate2) %>
        <%: Html.TextBox("fooDate2", Model != null ? Model.fooDate2 : null, new Dictionary<string, object>{{"type", "date"}, {"id", "fooDate2"}})%>
        <%: Html.ValidationMessageFor(model => model.fooDate2) %>
    </div>

Script:

脚本：

<script>
    $(function () {
        $(".ui-datepicker").hide();

        // fooDate1 datepicker
        var idDivStart = $("#fooDate1Div div").attr("id");
        $("#fooDate1").focus(function () {
            $("#" + idDivStart + " .ui-datepicker").show('fast');
        });

        // followUp datepicker
        var idDivEnd = $("#fooDate2Div div").attr("id");
        $("#fooDate2").focus(function () {
            $("#" + idDivEnd + " .ui-datepicker").show();
        });

        $(".ui-datepicker-calendar a").live("click", function () {
            $(".ui-datepicker").hide();
        });
    });    
</script>