9

次のエラーが表示されるため、隠しフィールドに jQuery UI から日付ピッカーを表示できないようです。

Uncaught TypeError: Cannot read property 'left' of undefined

通常のテキスト フィールドを使用する場合、問題はないようです。のバージョンであるjQuery UI 1.9.0との両方でこのエラーが発生します。1.9.2jQuery 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で（ではない）動作例を提供しました

4

3 に答える 3

7

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]; 
    };

日付ピッカーのターゲットオブジェクトが不可視の場合、不可視ではない最も近い兄弟位置を使用します

いくつかの解決策があります：</p>

解決策 1

LTRのため、2つの要素の位置を入れ替えることができます

<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]; 
    };
于 2014-07-11T08:59:23.933 に答える
1

ボタンのクリックで日付ピッカーを表示する必要があったため、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 要素にボタンを配置するだけで済みました。他の誰かがこの問題を抱えている場合。

于 2016-05-30T16:27:02.977 に答える