Jquery UI Datepicker 不显示

Jquery UI Datepicker not displaying

提问by scott

UPDATE
I have reverted back to Jquery 1.3.2 and everything is working, not sure what the problem is/was as I have not changed anything else apart of the jquery and ui library versions.
UPDATE END

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

I having an issue with the JQuery UI datepicker. The datepicker is being attached to a class and that part is working but the datepicker is not being displayed.

我在使用JQuery UI datepicker 时遇到问题。日期选择器被附加到一个班级并且该部分正在工作，但日期选择器没有被显示。

Here is the datepicker code I am using and the inline style that is being generated when I click in the input box that has the class ".datepicker".

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

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

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

If I change the display:none to display:block the datepicker works fine except it dosen't close when I select a date.

如果我将 display:none 更改为 display:block 日期选择器工作正常，除非我选择日期时它不会关闭。

Jquery libraries in use:

正在使用的 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

• 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

采纳答案by user227353

it's the css file in the new one doesn't work. Try to include the old 1.7.* css file on your header too, and try again.

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

Also, did you try to do a .datepicker( "show" ) right after it constructed?

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

回答by undefined

I was having the same problem, and I found that in my case the cause was the datepicker div for some reason is retaining the class .ui-helper-hidden-accessible, which has the following CSS:

我遇到了同样的问题，我发现在我的情况下，原因是 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);
}

I'm using the google CDN hosted versions of jquery, so I couldn't modify the code or the CSS. I had also tried changing the z-index without any success. The solution that worked for me was to set the clip property for the datepicker back to its default value, auto:

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

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

Since this specifically targets the datepicker div, there's less of a chance of unintended side effects on other widgets than changing the ui-helper-hidden-accessible class as a whole.

由于这专门针对日期选择器 div，与整体更改 ui-helper-hidden-accessible 类相比，对其他小部件产生意外副作用的可能性较小。

回答by Bren1818

This may be helpful to someone. If you copied and pasted your form data (which has the datepicker input box, ensure you do notinadvertently copy the class="hasDatepicker"

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

This means your input box should look like this:

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

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

NOT

不是

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

I made that mistake inadvertently. Removing the class and allowing the jQuery UI call appeared to fix it.

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

Hope that helps someone!

希望对某人有所帮助！

回答by olen_garn

I had the same issue: the Date Picker was added successfully (and could even be found in FireBug), but was not visible. If you use FireBug to remove the class "ui-helper-hidden-accessible" from the Date Picker div (ID of: "ui-datepicker-div"), the Date Picker becomes visible and will work like normal.

我有同样的问题：日期选择器已成功添加（甚至可以在 FireBug 中找到），但不可见。如果您使用 FireBug 从日期选择器 div（ID 为：“ui-datepicker-div”）中删除类“ui-helper-hidden-accessible”，则日期选择器将变得可见并且可以正常工作。

If you add the following at the very end of your $(document).ready() function, it will apply this to every Date Picker on you page, and make them all work:

如果您在 $(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');  
});

That was my initial fix. Afterwards, I tried the solution suggested above by Brian Mortenson and it both worked perfectly, and seemed less invasive than removing an entire class from the element. So I modified my code to apply his solution to the method I used (apply at the end of the document setup so that it applies to every Date Picker and does not require repeating):

那是我最初的修复。之后，我尝试了 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');  
});

Hope this helps to get someone unstuck.

希望这有助于让某人解脱。

EDIT: Fixed a code syntax error.

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

回答by Spaceploit

I've had a similar issue with 1.7.2 versions of jQuery and jQuery UI. The popup wasn't showing up and none of the applicable suggestions above helped. What helped in my case was taking out the class="hasDatepicker" which (as the accepted answer here notes: jQuery UI datepicker will not display - full code included) is used by jquery-ui to indicate that a datepicker has already been added to the text field. Wish I found that answer sooner.

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

回答by Anticipator

Please make sure that you are using the same versionof jquery-ui 'js' and 'css' files. Sometimes that could be a problem.

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

回答by Jeremie

I had the same problem using JQuery-UI 1.8.21, and JQuery-UI 1.8.22.

我在使用 JQuery-UI 1.8.21 和 JQuery-UI 1.8.22 时遇到了同样的问题。

Problem was because I had two DatePicker script, one embedded with jquery-ui-1.8.22.custom.min.jsand another one in jquery.ui.datepicker.js(an old version before I upgrade to 1.8.21).

问题是因为我有两个 DatePicker 脚本，一个嵌入了jquery-ui-1.8.22.custom.min.js，另一个嵌入了jquery.ui.datepicker.js（我升级到 1.8.21 之前的旧版本）。

Deleting the duplicatejquery.ui.datepicker.js, resolve problem for both 1.8.21 and 1.8.22.

删除重复的jquery.ui.datepicker.js，解决 1.8.21 和 1.8.22 的问题。

回答by Kyle Robson

I changed the line

我换了线

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

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

to

到

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

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

and everything works now. Otherwise try upping the z-index as Soldierflup suggested.

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

回答by Soldierflup

Try putting the z-index of your datepicker css a lot higher (eg z-index: 1000). The datepicker is probably shown under your original content. I had the same problem and this helped me out.

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

回答by Schlie?MuskelKater

Had the same problem that the datepicker-DIV has been created but didnt get filled and show up on click. My fault was to give the input the class "hasDatepicker" staticly. jQuery-ui hat to set this class by its own. then it works for me.

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