使用CSS作用域以编程方式创建jQuery UI datepicker

这解决了从版本1.10.3开始尚未修复的jQuery UI的限制。

jQuery UI有一个themeroller函数，允许您设置jQuery UI小部件的样式，但有时您需要在一个页面上有多个主题，因此themeroller允许您在创建小部件时指定CSS“范围”。 这只是一个自定义CSS类名，在themerolled CSS中使用它来消除主题CSS的歧义。 以下是由themeroller生成的CSS规则的示例：

.myCustomClass .ui-buttonset { margin-right: 7px; } 

其中myCustomClass是生成主题小部件时给出的“范围”。 我们的想法是，您可以通过将类分配给表单，div或呈现小部件的任何容器来指定页面的哪个部分具有自定义主题：

 
 ...your custom themed widgets go here...  

问题是一些小部件，特别是datepicker创建了另一个附加到文档主体的div 。 它看起来像这样：

 
... 

通常你不会看到这个div，因为它是通过分配样式显示来隐藏的：none，但是一旦创建了一个datepicker，它就会一直存在。 它由页面上的所有日期选择器共享。 当一个日期选择器需要显示一个“选择器”时，这就是显示的div。

但是这个picker div不在form，div或包含你的小部件的任何内容中，所以它丢失了它的所有样式，因为它不在class =“myCustomClass”的容器中。 显示选择器时非常明显。

一个常见的解决方法是在文档准备好后运行它：

 $("#ui-datepicker-div").wrap('
'); 

但是，只有在页面上已经实例化了一个日期选择器时，这才有效。 但是我必须即时创建我的小部件，那么我可以做些什么来使日期选择器在这种情况下工作？

Answer 1

我的解决方案是在应用.wrap变通方法之前创建一个虚拟日期选择器，如下所示：

 $(document).ready(function(){ // The following is a workaround for datepicker not working with // a CSS "scope" setting. $("").appendTo($('body')).datepicker(); $("#ui-datepicker-div").wrap('
'); }); 

但是你只能这样做一次，所有的选择器都会显示在给定的主题中。