jquery datepicker超出css范围答案

【问题标题】：jquery datepicker out of css scopejquery datepicker超出css范围
【发布时间】：2011-05-05 02:21:06
【问题描述】：

我在一页中使用了多个 ui 主题。我创建了一个具有css 范围的自定义主题，比如说#scope。我在范围内使用了一个日期选择器字段，比如说#scope input#datepicker。 datepicker 字段没有从 ui 主题中获取 css 样式。我猜这是因为它是在#scope 之外动态创建的，我该如何更改它，以及如何让它从作用域中获取样式。

【问题讨论】：

标签： jquery css jquery-ui datepicker

【解决方案1】：

我通过在代码中添加包装 div 解决了这个问题。

$(document).ready(function(){
    $("#ui-datepicker-div").wrap('<div class="ui-layout-center" />');
});

【讨论】：

只是为了澄清“ui-layout-center”是您的自定义 css 类，对吗？我个人会尽量避免使用与 jQuery UI 的其余部分相同的 ui- 前缀，以避免在未来版本中可能出现名称冲突。

【解决方案2】：

@bkilinc，你是对的。 datepicker 日历被附加到 document.body，在您的自定义范围之外。

http://bugs.jqueryui.com/ticket/4591 http://bugs.jqueryui.com/ticket/4306

在像下面这样的结构中，日历超出了容器的范围。

<style type="text/css">
    .calendarContainer .ui-datepicker {
        /* rule intended to affect only .calendarContainer */
    }
</style>
...
<body>
    <div class="calendarContainer"><input name="date"/></div>
    <div class="ui-datepicker"> (generated calendar)</div>
</body>

【讨论】：

【解决方案3】：

我记得有同样的问题，检查一般定义的样式例如span，它可能与ui样式重叠。

【讨论】：