Jquery UI Datepicker不显示

Posted 2023-05-07

【中文标题】Jquery UI Datepicker不显示

【英文标题】：Jquery UI Datepicker not displaying

【发布时间】：2011-02-10 13:18:49

【问题描述】：

更新 我已经恢复到 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 日期选择器可以正常工作，但在我选择日期时它不会关闭。

正在使用的 Jquery 库：

jQuery javascript 库 v1.4.2 jQuery UI 1.8 jQuery UI 小部件 1.8 jQuery UI 鼠标 1.8 jQuery UI 位置 1.8 jQuery UI Draggable 1.8 jQuery UI Droppable 1.8 jQuery UI 日期选择器 1.8

【问题讨论】：

似乎 display:none 和 display:block 覆盖了 datepicker 调用的 show()/hide() 方法。你确定其他地方没有 CSS 规则冲突吗？

日期选择器插件正在生成 display:none，并且我的样式表中没有附加 css。

【参考方案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);

我使用的是 google CDN 托管版本的 jquery，所以我无法修改代码或 CSS。我也尝试过更改 z-index 没有任何成功。对我有用的解决方案是将日期选择器的剪辑属性设置回其默认值，自动：

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

由于这专门针对 datepicker div，因此与将 ui-helper-hidden-accessible 类作为一个整体进行更改相比，对其他小部件产生意外副作用的可能性较小。

【讨论】：

我试过这个，但它对我不起作用。我正在使用 Jquery UI 1.8.18 和 Jquery 1.7.1，所以这是最新的。

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

非常适合我。谢谢。

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

非常感谢！您的解决方案是唯一对我有用的解决方案。你真棒。继续努力。

【参考方案2】：

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

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

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

不是

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

我无意中犯了这个错误。删除该类并允许 jQuery UI 调用似乎可以修复它。

希望对某人有所帮助！

【讨论】：

就是这样。

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

我也是。谢谢！

【参考方案3】：

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

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

【讨论】：

刚才遇到了同样的问题，决定将我的css文件更新到最新版本，并且成功了。我有 1.8.16，现在有 1.8.21。只是对这个答案的补充。

【参考方案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');  
);

希望这有助于让某人摆脱困境。

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

【参考方案5】：

我在 jQuery 和 jQuery UI 的 1.7.2 版本中遇到过类似的问题。弹出窗口没有出现，上述适用的建议都没有帮助。对我来说有帮助的是取出 class="hasDatepicker" （这里接受的答案注释：jQuery UI datepicker will not display - full code included），jquery-ui 使用它来指示日期选择器已添加到文本字段中。希望我能早点找到答案。

【讨论】：

这个解释帮助我意识到如果你正在复制已经具有 hasDatepicker 类的表单元素，那么复制的日期选择器将不起作用。我不得不从克隆的表单中删除这个类——比如$("#sibling_"+nextSibling).find('input').removeClass("hasDatepicker");

【参考方案6】：

请确保您使用的是 相同版本的 jquery-ui 'js' 和 'css' 文件。有时这可能是个问题。

【参考方案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的问题。

【参考方案8】：

试着把你的 datepicker css 的 z-index 提高很多（例如 z-index: 1000）。 日期选择器可能显示在您的原始内容下。 我遇到了同样的问题，这帮助了我。

【参考方案9】：

我换行了

.ui-helper-hidden-accessible position: absolute !important;剪辑：矩形（1px 1px 1px 1px）；剪辑：矩形（1px，1px，1px，1px）；

到

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

现在一切正常。否则，请尝试按照 Soldierflup 的建议提高 z-index。

【讨论】：

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

@MikeS。听起来像是没有应用包含日期选择器的 CSS 文件，或者之后正在应用其他规则。您能否在浏览器（最好是 Chrome）的开发工具中检查您的日期选择器，并查看正在应用哪些规则以及从哪里应用？如果它们不存在，请仔细检查文件的路径是否正确。

【参考方案10】：

同样的问题是 datepicker-DIV 已创建但没有被填充并在点击时显示。 我的错是静态地给输入类“hasDatepicker”。 jQuery-ui 可以自己设置这个类。然后它对我有用。

【参考方案11】：

如果您在使用 WordPress 控制面板并使用 ThemeRoller 生成的主题时遇到此问题 - 请确保您使用的是 1.7.3 版本的主题，1.8.13 将无法工作。 （如果您仔细观察，该元素正在被渲染，但 .ui-helper-hidden-accessible 导致它无法显示。

当前 WP 版本：3.1.3

【参考方案12】：

这是一个稍微不同的问题。对我来说，日期选择器会显示，但 CSS 没有加载。

我通过以下方式修复它：重新加载主题（转到 jquery ui css，第 43 行并在那里复制 url 以编辑您的主题滚轮主题） > 不使用高级选项重新保存 > 替换旧文件 > 尽量不要更改 url 并查看如果这也有帮助的话。

【参考方案13】：

* html .ui-helper-hidden-accessible 

 position: absolute !important; 
 clip: rect(1px 1px 1px 1px); 
 clip: rect(1px,1px,1px,1px); 

这仅适用于 IE，因此我应用此 hack 并在 FF、Safari 和其他设备上正常工作。

【参考方案14】：

好的，我终于找到了我的解决方案。

如果您在视图上使用模板（使用 Moustache.js 或其他...），您必须考虑到您的某些类可以加载两次，或者稍后再创建。因此，您必须在创建实例后应用此函数$(".datepicker" ).datepicker();。

【参考方案15】：

在我的情况下，某些主题（cupertino/theme.css）似乎会发生。

问题是 .ui-helper-hidden-accessible 类具有剪辑属性，就像以前的用户所说的那样。

只要覆盖它就可以了

$(document).ready(function() 
    $("#datePicker").datepicker( dateFormat: "yy-m-d" );
    $('#ui-datepicker-div').css('clip', 'auto');
);

【参考方案16】：

如果您使用 Metro UI css 脚本（来自http://metroui.org.ua/ 的优秀免费 Metro UI），也可能会发生冲突。 就我而言，这是最近的问题。

所以，删除了 Metro UI 的脚本引用（因为我没有使用它的组件），日期选择器正在显示。

但是你不能在地铁上寻找 jQuery-ui 的 datepicker

但在大多数情况下，正如其他人所提到的，它与 jQuery-UI javascripts 的重复版本发生冲突。

【参考方案17】：

我也遇到过类似的问题。它会在不同的选项卡下启动一次，而不是第二次。我使用了一个类而不是一个 id，并且在任何地方都使用了相同的类名。对我来说，似乎 datepicker 激活了一次，并且必须在任何地方使用原始初始化。或许可以使用 destroy api 编写代码，但对我来说很容易在任何地方都使用相同的类。

【参考方案18】：

我找到了一个技巧解决方案。您可以使用以下代码。

$(".datepicker").datepicker(
/* any options you want */
beforeShowDay: function (date) 
    $('#ui-datepicker-div').css('clip', 'auto');
    return [true, '', ''];
    
);

【参考方案19】：

这是完整的代码，它在我这边工作：只是测试。

<!doctype html>
<html lang="en">
   <head>
      <title>jQuery Datepicker</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <script>
         $(function() 
            $( "#datepicker1" ).datepicker();
         );
      </script>
   </head>
   <body>
      <p>Enter Date: <input type="text" id="datepicker1"></p>
   </body>
</html>

【参考方案20】：

之所以发帖，是因为我的案子的根本原因还没有被她描述。

在我的情况下，问题是“assets/js/fuelux/treeview/fuelux.min.js”正在添加一个构造函数 .datepicker()，所以它覆盖了 assets/js/datetime/bootstrap-datepicker.js

只是移动

在 $('.date-picker') 解决我的问题之前。

【参考方案21】：

在使用引导模式时遇到了同样的问题。我不小心使用!important 为.ui-datepicker 设置了z-index，它覆盖了元素上的日期选择器z-index css 属性。删除 !important 有效。

【参考方案22】：

当 div 固定时，jQuery 将其日期选择器的位置更改为“固定”Check Screenshot here

所以，为了让它工作，我们可以强制将位置值赋予“绝对”，这样才能让它工作。

div#ui-datepicker-div position:absolute !important;