27

更新
我已经恢复到 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
4

22 回答 22

32

我遇到了同样的问题，我发现在我的情况下，原因是 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 类相比，对其他小部件的意外副作用的可能性较小。

于 2011-03-05T02:34:34.233 回答
23

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

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

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

不是

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

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

希望对某人有所帮助！

于 2017-09-14T14:39:46.887 回答
11

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

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

于 2010-04-21T14:09:02.487 回答
10

我遇到了同样的问题：日期选择器已成功添加（甚至可以在 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');  
});

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

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

于 2011-05-10T18:32:49.423 回答
6

我在 1.7.2 版本的 jQuery 和 jQuery UI 上遇到过类似的问题。弹出窗口没有出现，并且上述适用的建议都没有帮助。对我的情况有帮助的是取出 class="hasDatepicker" （正如此处接受的答案所指出的那样：jQuery UI datepicker will not display - full code included）被 jquery-ui 用来指示 datepicker 已经添加到文本字段。希望我早点找到答案。

于 2015-02-17T23:20:28.320 回答
4

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

于 2012-02-03T19:33:56.580 回答
3

我在使用 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 的问题。

于 2012-07-29T14:03:26.870 回答
2

尝试将你的 datepicker css 的 z-index 设置得更高一些（例如 z-index: 1000）。日期选择器可能显示在您的原始内容下。我有同样的问题，这帮助了我。

于 2010-04-21T13:34:25.473 回答
2

我换了行

.ui-helper-hidden-accessible { 位置：绝对！重要；剪辑：矩形（1px 1px 1px 1px）；剪辑：矩形（1px，1px，1px，1px）；}

到

.ui-helper-hidden-accessible { 位置：绝对！重要；}

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

于 2011-02-17T00:32:53.740 回答
1

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

于 2015-07-23T10:31:07.547 回答
0

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

当前 WP 版本：3.1.3

于 2011-06-25T22:41:32.910 回答
0 
* html .ui-helper-hidden-accessible 
{
 position: absolute !important; 
 clip: rect(1px 1px 1px 1px); 
 clip: rect(1px,1px,1px,1px); 
}

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

于 2011-11-29T21:36:42.830 回答
0

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

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

于 2012-03-13T12:34:10.830 回答
0

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

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

于 2012-04-08T11:59:21.763 回答
0

就我而言，似乎发生在某些主题（cupertino/theme.css）上。

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

只需覆盖它就可以了

$(document).ready(function() {
    $("#datePicker").datepicker({ dateFormat: "yy-m-d" });
    $('#ui-datepicker-div').css('clip', 'auto');
});
于 2013-08-11T17:46:07.857 回答
0

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

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

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

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

于 2013-12-11T14:28:57.517 回答
0

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

于 2015-06-11T20:03:52.877 回答
0

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

<!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>
于 2016-06-16T10:09:06.097 回答
0

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

$(".datepicker").datepicker({
/* any options you want */
beforeShowDay: function (date) {
    $('#ui-datepicker-div').css('clip', 'auto');
    return [true, '', ''];
    }
});
于 2016-12-14T07:50:51.187 回答
0

只是因为我的案件的根本原因没有被描述她才发帖。

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

只是移动

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

于 2019-03-05T17:37:11.970 回答
0

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

于 2019-11-23T06:55:59.470 回答
0

当 div 固定时，jQuery 将其日期选择器的位置更改为“固定”检查屏幕截图here

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

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

于 2022-01-16T16:50:44.740 回答