Question

我试图在点击表单字段时显示一个日期选择器，但是datepicker对话框没有显示出来。有趣的是，jquery包含了datepicker div，但之后根本没有显示或填充任何内容。

就我所见，javascript错误控制台没有显示任何错误。

头部（缩短）：

<link rel="stylesheet" href="/theme/sporthub/scripts/jqueryui/jquery-ui-1.8.16.custom.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://d2oqbtqshlvsrd.cloudfront.net/jquery.corner.js"></script>
<script type="text/javascript" src="/theme/sporthub/scripts/jqueryui/jquery-ui-1.8.16.min.js"></script>

表单字段：

<div class="field1"><input id="donation_start" type="text" name="donation_start" value="<?= $a_donationsSetting['donation_start'] ?>" class="date_123 marginL14 hasDatepicker" /></div>

datepicker调用：

$(document).ready(function() {
   $( "#donation_start" ).datepicker();
});

当我打开网站并使用Firebug查看它时，我可以看到以下行显示（它不在实际的源代码中，所以我猜它会被datepicker包含...... ??）

<div class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" id="ui-datepicker-div"></div>

我试图通过使用$（'。hasDatepicker'）。datepicker来调用datepicker，而不是将其放在document.read（）中。没有成功。

最让我感到困惑的是，datepicker也用于另一个包含的文件中，并且它的工作原理非常好。

Answer 1

我的同事刚出现并告诉我要移除hasDatepicker类。这解决了这个问题。

显然，jquery-ui在这个过程中添加了这个类，当它已经存在时，datepicker将不会触发。

Answer 2

我有类似的问题，z-index是罪魁祸首。它使用相对于输入的z-index，因此请确保您的输入字段具有CSS位置：相对集合，在我的情况下，我必须将z-index调整为10才能使其工作;

JQuery UI Datepicker在点击时没有触发（没有错误）

2 个答案: