Uncaught TypeError: Не удается прочитать свойство «левый» неопределенной

Question

Я не могу показаться, чтобы показать DatePicker из 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 «end_date». «Display: none» не поможет, потому что тогда поле снова полностью невидимо.

Пример также в 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]; 
    }; 

Если цель OBJ из DatePicker невидим, он будет использовать ближайшее положение родственного, которое не является невидимым

Есть несколько решений:

Решения 1

Из-за LTR вы можете обменять положение двух e lement

<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, а также, потому что я нуждался в моей DatePicker, чтобы показать с помощью кнопки.

Это работает:

<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'); 
}); 

Так все, что нужно ed должен был поместить кнопку в один и тот же элемент div. В случае, если у кого-то еще есть эта проблема.