Jquery UI Datepicker未显示

Question

更新
我已经恢复到Jquery 1.3.2并且一切正常,不知道问题是什么/因为我没有更改jquery和ui库版本之外的任何其他内容.
更新结束

我遇到了JQuery UI datepicker的问题.datepicker被附加到一个类,该部分正在工作但是没有显示日期选择器.

这是我正在使用的datepicker代码以及当我点击具有类".datepicker"的输入框时生成的内联样式.

$('.datepicker').datepicker({dateFormat:'dd/mm/yy'});

display:none;
left:418px;
position:absolute;
top:296px;
z-index:1;

如果我更改显示:无显示:阻止日期选择器工作正常,但选择日期时它不会关闭.

正在使用的Jquery库:

• jQuery JavaScript Library v1.4.2
• jQuery UI 1.8 jQuery UI Widget 1.8
• jQuery UI Mouse 1.8 jQuery UI
• 位置1.8 jQuery UI Draggable 1.8
• jQuery UI Droppable 1.8 jQuery UI
• Datepicker 1.8

Answer 1

我遇到了同样的问题,我发现在我的情况下,原因是datepicker div由于某种原因保留了类.ui-helper-hidden-accessible,它具有以下CSS:

.ui-helper-hidden-accessible {
 position: absolute !important;
 clip: rect(1px 1px 1px 1px);
 clip: rect(1px,1px,1px,1px);
}

我正在使用谷歌CDN托管的jquery版本,所以我无法修改代码或CSS.我也尝试过改变z-index而没有任何成功.对我有用的解决方案是将datepicker的clip属性设置回其默认值auto:

$('.date').datepicker();
$('#ui-datepicker-div').css('clip', 'auto');

由于这专门针对datepicker div,因此与其他小部件的意外副作用相比,整体上更改ui-helper-hidden-accessible类的可能性更小.

Answer 2

这可能对某人有帮助.如果您复制并粘贴了表单数据(具有datepicker输入框,请确保您不会无意中复制class ="hasDatepicker"

这意味着您的输入框应如下所示:

<input id="dateChooser" name="dateChooser" type="text" value=""/>

不

<input id="dateChooser" name="dateChooser" type="text" value="" class="hasDatepicker">

我无意中犯了这个错误.删除类并允许jQuery UI调用似乎解决了它.

希望有人帮助!

Answer 3

它是新的css文件不起作用.尝试在标题中包含旧的1.7.*css文件,然后重试.

另外,你是否尝试在构建之后立即执行.datepicker("show")？

Answer 4

我有同样的问题:日期选择器已成功添加(甚至可以在FireBug中找到),但不可见.如果您使用FireBug从日期选择器div(ID:"ui-datepicker-div")中删除"ui-helper-hidden-accessible"类,则日期选择器将变为可见并将正常工作.

如果在$(document).ready()函数的最后添加以下内容,它会将其应用于您页面上的每个日期选择器,并使它们全部工作:

$(document).ready(function() {
      //...
      //Put all of you other page setup code here
      //...

      //after setting everything up (including adding all Date Pickers)
      //apply this code to every Date Picker
      $('#ui-datepicker-div').removeClass('ui-helper-hidden-accessible');  
});

这是我最初的修复.之后,我尝试了Brian Mortenson上面提出的解决方案,它完美地工作,并且似乎比从元素中删除整个类更具侵入性.所以我修改了我的代码以将他的解决方案应用于我使用的方法(在文档设置的末尾应用,以便它适用于每个日期选择器,并且不需要重复):

$(document).ready(function() {
      //...
      //Put all of you other page setup code here
      //...

      //after setting everything up (including adding all Date Pickers)
      //apply this code to every Date Picker
      $('#ui-datepicker-div').css('clip', 'auto');  
});

希望这有助于让某人失意.

编辑:修复了代码语法错误.

Answer 5

我在 1.7.2 版本的 jQuery 和 jQuery UI 中遇到了类似的问题。弹出窗口没有出现，上面的适用建议都没有帮助。对我的情况有帮助的是取出 class="hasDatepicker"，jquery-ui 使用它（这里接受的答案指出：jQuery UI datepicker 不会显示 - 包含完整代码）来指示日期选择器已添加到文本字段。希望我早点找到答案。