Question

我似乎无法在隐藏字段上显示来自jQuery UI的日期选择器，因为我收到此错误：

Uncaught TypeError: Cannot read property 'left' of undefined

当我使用常规文本字段时，我似乎没有问题。我对jQuery UI 1.9.0和1.9.2 jQuery is 1.8.3

的版本都收到此错误

HTML

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

JS

$(".end_date").datepicker({
    dateFormat: 'yyyy-mm-yy',
    yearRange: '-00:+01'
});

$('.date_target').click(function () {
    $(this).next().datepicker('show');
});

我在此jsfiddle上提供了一个（非）工作示例

Answer 1

这是因为浏览器看不到输入字段（因为它是隐藏的）。

试试这个：

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

你没事。当然，您可以将额外的样式属性添加到CSS类＆＃34; end_date＆＃34;。 A＆＃34;显示：无＆＃34;没有用，因为那时场地再次完全看不见。

JS Fiddle中的示例。

Answer 2

让我们检查一下datepicker _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>

解决方案2

在隐藏元素旁边添加一个可见元素，因此datepicker将找到可见元素位置

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

解决方案3

重新定义_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();
        // 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]; 
    };

Answer 3

我在使用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>

<强> JS：

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

所以我需要的是将按钮放在同一个div元素上。如果其他人有这个问题。

未捕获的TypeError：无法读取属性＆＃39; left＆＃39;未定义的

3 个答案: