jQuery Mobile - >覆盖jQuery UI Datepicker - >布局坏了 [英] jQuery Mobile -> Override jQuery UI Datepicker -> Layout broken

问题描述

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

I am using jQuery Mobile in my web application. There is a datepicker which overrides the default 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

The JavaScript file which overrides it, is here: 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 }));
    });
});

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

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.

所以，这里有什么问题？

So, what's wrong here?

提前谢谢你&最好的问候。

Thank you in advance & Best Regards.

推荐答案

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

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

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

示例在这里

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

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

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

对话文档

这篇关于jQuery Mobile - >覆盖jQuery UI Datepicker - >布局坏了的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！