jQuery 移动 ->覆盖 jQuery UI 日期选择器 ->布局损坏

Question

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

这是来源： 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($("<div />").datepicker({ altField: "#" + $(this).attr("id"), showOtherMonths: true }));
    });
});

在这种情况下，我得到一个日期选择器，它总是可见的。要仅在用户单击日期文本字段时具有可见性，日期选择器必须连接到输入字段，但此处情况并非如此。 所以我必须删除 .after("

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

那么，这里出了什么问题呢？

预先感谢您&此致。

Answer 1

这是我的解决方案

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

Answer 2

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

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

示例

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

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

Dialog文档

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 代码：

<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. 这是在 Safari 浏览器中进行了测试。
2. 检查日期输入元素。
3. 看一下，在
   内。有一个动态创建的新 DIV，其 id="dp1298574069963"。我将其捕获在变量 (var idDivStart = $("#startPicker div").attr("id");) 中，并使用它的变量来指定该 Div 中具有 ui 的所有元素-datepicker 类将会显示 ($("#"+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

移动日期选择器的作者有一个功能示例 在他的 git 页面上。

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

Answer 6

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

标记（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>
    $(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>