Jquery ui 未捕获类型错误：无法读取属性'；左'；未定义的

当我遇到以下错误时，我似乎无法在隐藏字段上显示jQuery UI中的日期选择器：

Uncaught TypeError: Cannot read property 'left' of undefined

当我使用常规文本字段时，我似乎没有问题。我在

jQuery UI 1.9.0

和

1.9.2

中都遇到了这个错误，

jQuery的版本是1.8.3

html

---

我在这方面也提供了一个（不）工作示例，这是因为输入字段对浏览器不可见（因为它是隐藏的）

试试这个：

<input type="text" style="height: 0px; width:0px; border: 0px;" class="end_date" />

你很好。当然，您可以向CSS类“end_date”添加额外的样式属性。“display:none”将不会有帮助，因为这样字段将再次完全不可见

---

另一个例子是。

让我们检查datepicker\u findPos函数

$.datepicker._findPos = function (obj) {
        var position,
            inst = this._getInst(obj),
            isRTL = this._get(inst, "isRTL");

        while (obj && (obj.type === "hidden" || obj.nodeType !== 1 || $.expr.filters.visible(obj))) {
            obj = obj[isRTL ? "previousSibling" : "nextSibling"];
        }

        position = $(obj).offset();        

        /*because position of invisible element is null, js will break on next line*/
        return [position.left, position.top]; 
    };

如果datepicker的目标obj不可见，它将使用不可见的最近同级位置

有几种解决方案：

解决方案1

由于LTR，您可以交换两个元素的位置

<tr>
    <td> 
        <input type="hidden" class="end_date" />
        <small class="date_target">until <span>Dec. 31, 2013</span></small>
    </td>
</tr>

---

我在使用Bootstrap时也遇到了同样的问题，因为我需要我的日期选择器通过点击按钮来显示

这是有效的：

<div class="form-group">
   <label class="sr-only" for="txtDate">Date</label>
   <input type="text" class="form-control input-sm" style="display: none;" id="txtDate">
   <button type="button" class="btn btn-default btn-sm" id="btnDate">
      <span class="glyphicon glyphicon-calendar"></span> Calendar
   </button>
</div>

<div class="form-group">
   <label class="sr-only" for="txtDate">Date</label>
   <input type="text" class="form-control input-sm" style="display: none;" id="txtDate">
</div>
<button type="button" class="btn btn-default btn-sm" id="btnDate">
   <span class="glyphicon glyphicon-calendar"></span> Calendar
</button>

$('#txtDate').datepicker({
   dateFormat: 'yy-mm-dd',
   showAnim: 'fade'
});
$("#btnDate").on('click', function(){
   $('#txtDate').datepicker('show');
});

---

所以我只需要把按钮放在同一个div元素上。以防其他人有此问题。

谢谢。我不得不使用一些额外的css，但它很有帮助。这个答案实际上比公认的答案对我更有帮助。即使在将元素的样式更改为“显示”隐藏后，它仍然会给我错误，除非我给它一个实际的宽度/高度。但是，将动态添加的隐藏字段放在文档的开头而不是结尾可以解决此问题：）不要使用计划向服务器提交值的表单元素的

style=“display:none；”“

$.datepicker._findPos = function (obj) {
        var position,
            inst = this._getInst(obj),
            isRTL = this._get(inst, "isRTL");

        while (obj && (obj.type === "hidden" || obj.nodeType !== 1 || $.expr.filters.visible(obj))) {
            obj = obj[isRTL ? "previousSibling" : "nextSibling"];
        }

        position = $(obj).offset();
        // if element type isn't hidden, use show and hide to find offset
        if (!position) { position = $(obj).show().offset(); $(obj).hide();}
        // or set position manually
        if (!position) position = {left: 999, top:999};
        return [position.left, position.top]; 
    };

<div class="form-group">
   <label class="sr-only" for="txtDate">Date</label>
   <input type="text" class="form-control input-sm" style="display: none;" id="txtDate">
   <button type="button" class="btn btn-default btn-sm" id="btnDate">
      <span class="glyphicon glyphicon-calendar"></span> Calendar
   </button>
</div>

<div class="form-group">
   <label class="sr-only" for="txtDate">Date</label>
   <input type="text" class="form-control input-sm" style="display: none;" id="txtDate">
</div>
<button type="button" class="btn btn-default btn-sm" id="btnDate">
   <span class="glyphicon glyphicon-calendar"></span> Calendar
</button>

$('#txtDate').datepicker({
   dateFormat: 'yy-mm-dd',
   showAnim: 'fade'
});
$("#btnDate").on('click', function(){
   $('#txtDate').datepicker('show');
});