3

JQuery UI の datepickerを使用していますが、datepicker をinput[type=text]要素にアタッチする代わりに、要素にアタッチしていinput[type=hidden]ます。日付ピッカーを有効にするために、日付ピッカーが接続されている入力要素の兄弟ではない UI のリモート ボタンを使用しています。

日付ピッカーを表示するために、このコードを実行するクリック イベント ハンドラーを使用しています。

$('input.trial_end_date').datepicker('show');

これは日付ピッカーを表示するために機能しますが、日付をクリックするたびに、キャッチされていない JavaScript 例外が発生します。

Uncaught Missing instance data for this datepicker jquery-ui-1.10.1.custom.min.js:6
e.extend._getInst jquery-ui-1.10.1.custom.min.js:6
e.extend._selectDay jquery-ui-1.10.1.custom.min.js:6
t.selectDay jquery-ui-1.10.1.custom.min.js:6
v.event.dispatch localhost.local/:5
o.handle.u localhost.local/:5

ただし、入力要素がフォーカスされているときに日付ピッカーを表示できるように を に変更するinput[type=hidden]とinput[type=text]、すべてのクリック イベントが問題なく発生します (ボタンを介して日付ピッカーをアクティブにするまで、日付ピッカーがどのようにアクティブになってもすべて失敗します) ）。

リモート ボタンを使用して日付ピッカーを有効にし、日付の入力要素を非表示にする、より信頼できる方法はありますか? この例外がスローされる理由がまったくわかりません。

これがJSFiddleで機能しない例を次に示します。ただし、例外は同じではありません。さらに調査した結果、その理由を見つけたようです。これを以下の回答に追加します。

4

2 に答える 2

3

通常の div で datepicker をインスタンス化し、その div を非表示にして表示できるのに、なぜ非表示の入力を使用するのでしょうか? 入力が必要ない場合は、使用しないでください。

<input type="button" id="open" />
<div id="datepicker"></div>

JS

$('#datepicker').datepicker();

$('#open').on('click', function() {
    $('#datepicker').toggle();
});

フィドル

于 2013-07-10T14:49:21.073 に答える