Jquery UI Datepicker未显示

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

我遇到了JQuery UI datepicker的问题。 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

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

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

我遇到了同样的问题,我发现在我的情况下,原因是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类的可能性更小。

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

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

  

  

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

希望有人帮助!

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

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

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

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

我有1.7.2版本的jQuery和jQuery UI的类似问题。 弹出窗口没有显示,上面没有任何适用的建议有帮助。 在我的情况下有什么帮助取出了class =“hasDatepicker”(这里接受的答案注释: jQuery UI datepicker将不会显示 – 包含完整代码 )被jquery-ui用来表示已经添加了一个datepicker文本字段。 希望我能尽快找到答案。

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

我换了线

.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。

尝试将datepicker css的z-index放得更高(例如z-index:1000)。 datepicker可能显示在您的原始内容下。 我有同样的问题,这帮助了我。

有同样的问题,即datepicker-DIV已被创建,但没有填充并显示单击。 我的错是静态给输入“hasDatepicker”类。 jQuery-ui帽子可以自己设置这个类。 那对我有用。

如果您在使用WordPress控制面板和使用ThemeRoller生成的主题时遇到此问题 – 请确保您使用的是1.7.3版本的主题,1.8.13将无效。 (如果仔细观察,元素将被渲染,但.ui-helper-hidden-accessible导致它不被显示。

目前的WP版本:3.1.3

这是一个稍微不同的问题。 有了我,日期选择器会显示但css没有加载。

我通过以下方法修复它:重新加载主题(转到jquery ui css,第43行并复制url以编辑你的主题)>没有高级选项的Resave>替换旧文件>尽量不要更改url,看看是否有帮助同样。

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

这适用于IE,因此我应用此hack并在FF,Safari和其他方面正常工作。

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

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

在我的案例中似乎发生了一些主题(cupertino / theme.css)。

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

只是覆盖它,它会没事的

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

如果您使用的是Metro UI css(来自http://metroui.org.ua/的优秀免费地铁用户界面)的脚本,那也可能会发生冲突。 就我而言,这是最近的问题。

因此,删除了metro UI的脚本引用(因为我没有使用它的组件),datepicker正在显示。

但你不能让地铁寻找jQuery-ui的datepicker

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

我遇到过类似的问题。 它会在不同的标签下发布一次而不是第二次。 我使用了一个类而不是一个id,并且到处使用相同的类名。 对我来说,似乎datepicker激活一次,原始初始化必须在任何地方使用。 人们可以使用destroy api对此进行编码,但对我而言,在任何地方使用相同的类都很容易。

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

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

这是完整的代码,它在我身边工作:只是测试。

    jQuery Datepicker       

Enter Date: