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

Question

我在我的网络应用程序中使用 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("<div />") .但是后来，日期选择器的设计完全被破坏了，似乎日期选择器的重写没有生效，因为没有应用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');
      });
});