Jquery UI日期选择器不显示

Question

更新
我已经回到了Jquery 1.3.2版本，一切都正常工作，不确定问题是什么/曾经是什么，因为除了jquery和ui库版本之外我没有改变任何其他东西。
结束更新

我遇到了一个问题，使用JQuery UI datepicker。日期选择器被附加到一个类上，这部分工作正常，但日期选择器未显示。

这是我正在使用的日期选择器代码以及在具有“.datepicker”类的输入框中单击时生成的内联样式。

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

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

如果我将display:none改为display:block，datepicker就可以正常工作，但是当我选择日期时它不会关闭。

正在使用的jQuery库：

- jQuery JavaScript Library v1.4.2 - jQuery UI 1.8 jQuery UI Widget 1.8 - jQuery UI Mouse 1.8 jQuery UI - Position 1.8 jQuery UI Draggable 1.8 - jQuery UI Droppable 1.8 jQuery UI - Datepicker 1.8

- scott

---

似乎 display:none 和 display:block 覆盖了日期选择器调用的 show()/hide() 方法... 你确定没有其他地方冲突的 CSS 规则吗？ - Jeriko

display:none是由日期选择器插件生成的，我的样式表中没有与之相关联的CSS。 - scott

Answer 1

我遇到了同样的问题，我发现在我的情况下，日期选择器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);
}

我正在使用由Google CDN托管的jquery版本，因此无法修改代码或CSS。 我也尝试过改变z-index，但没有成功。 对我有效的解决方案是将日期选择器的剪辑属性设置回其默认值auto：

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

由于这个针对的是datepicker div，相比于整体更改ui-helper-hidden-accessible类，意外影响其他小部件的可能性更小。

- undefined

---

我尝试过这个，但对我没有用。我正在使用Jquery UI 1.8.18和Jquery 1.7.1，所以这非常新。 - Adamantus

你能给一些示例代码吗？有很多原因可能导致它没有起作用。我第一个猜测是这些行没有被调用，或者选择器没有选择你期望的内容。 - undefined

对我来说完美地工作了。谢谢。 - Nathan

我完全删除了这个类。$('#ui-datepicker-div').removeClass('ui-helper-hidden-accessible'); 以达到相同的效果。 - Milo LaMar

非常感谢！您的解决方案是我唯一有效的选择。您真棒！请继续保持好的工作状态。 - user670595

谢谢！这对我有用，使用的是jQuery-1.9.1和jQuery UI 1.10.2。 - Gorgsenegger

Answer 2

这可能对某些人有帮助。如果您复制并粘贴了表单数据（其中包含日期选择器输入框），请确保您不要无意中复制class="hasDatepicker"

这意味着您的输入框应该是这样的：

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

不是

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

我无意中犯了那个错误。移除该类并允许jQuery UI调用似乎解决了它。

希望这能帮到某些人！

- Bren1818

---

就像这样。 - Tomas Kubes

我找了很久才找到这个答案！太棒了...我还以为我要疯了。 - Bruce

我也是。谢谢！ - John Rand

Answer 3

新的CSS文件不起作用。请尝试在标题中包括旧的1.7.* CSS文件，然后再试一次。

此外，您是否尝试在构建后立即执行.datepicker("show")？

- user227353

---

刚刚遇到了同样的问题，决定将我的CSS文件更新到最新版本，然后它就可以工作了。我之前使用的是1.8.16，现在使用的是1.8.21。这只是对答案的补充。 - Bird87 ZA

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');  
});

希望这能帮助有人摆脱困境。

编辑：修复了代码语法错误。

- olen_garn

Answer 5

我曾遇到与jQuery和jQuery UI版本1.7.2类似的问题。弹出窗口没有显示，上面提供的任何建议都没有帮助。在我的情况下，有所帮助的是删除class="hasDatepicker" ，正如这里的被接受的答案指出的那样：jQuery UI datepicker will not display - full code included，jquery-ui用它来表示日期选择器已经添加到文本字段中。要是早点看到这个答案就好了。

- Spaceploit

---

这个解释帮助我意识到，如果你复制了已经有 hasDatepicker 类的表单元素，复制的日期选择器将无法使用。我不得不从克隆的表单中删除该类 - 大概是像这样 $("#sibling_"+nextSibling).find('input').removeClass("hasDatepicker"); - Tycon

Answer 6

请确保您正在使用相同版本的 jquery-ui 'js' 和 'css' 文件。有时，这可能会成为一个问题。

- Anticipator

Answer 7

我曾使用JQuery-UI 1.8.21和JQuery-UI 1.8.22时遇到了同样的问题。问题出在我有两个DatePicker脚本，一个是嵌入在jquery-ui-1.8.22.custom.min.js中的，另一个是老版本jquery.ui.datepicker.js（在升级到1.8.21之前）。删除重复的jquery.ui.datepicker.js文件，解决了1.8.21和1.8.22的问题。

- Jeremie

Answer 8

尝试将日期选择器的z-index值设置得更高（例如：z-index: 1000）。

日期选择器可能会显示在您原来的内容下方。

我曾经遇到过同样的问题，这个方法对我有帮助。

- Soldierflup

Answer 9

我将这一行代码

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

改成了：

.ui-helper-hidden-accessible { position: absolute !important; }

现在一切都正常了。如果还不行，可以像Soldierflup建议的那样提高z-index值。

- Kyle Robson

---

仍然对我没有用。我尝试了这个建议，我尝试了@brian的建议，我检查了匹配的源版本和设置z-index。这些都没有起作用。我的日期选择器显示时没有任何显示样式，就好像它全部是透明的，除了文本。 - Mike S.

@MikeS. 听起来包含日期选择器的 CSS 文件没有被应用，或者其他规则在其后被应用。您可以在浏览器的开发工具中检查您的日期选择器（最好使用 Chrome），看看应用了哪些规则以及它们来自哪里？如果它们不在那里，请再次检查文件路径是否正确。 - undefined

Answer 10

我遇到了相同的问题，即日期选择器DIV已被创建，但在单击时未填充并显示。我的错误是静态地给输入框设置了"class"为"hasDatepicker"。jQuery-ui必须自己设置这个类，然后它对我有效。

- SchließMuskelKater