7

ダイアログボックスでjquery datepickerを使いたいです。日付ピッカーは、フォーカス時にトリガーする必要があります (デフォルト)。テキストボックスはダイアログの最初のフィールドであるため、自動的にフォーカスがあります。これにより、ダイアログが最初に開かれたときに日付ピッカーが開かれるという望ましくない効果があります。

ダミーの href にフォーカスを設定する、ダイアログが開いた後に datepicker('close') を呼び出す、showOn を 'button' に設定する、ダイアログが開いた後に 'focus' に変更するなど、さまざまなことを試しましたが、どれも機能しません。

日付ピッカーは、ダイアログが最初に開いたときを除いて、テキスト ボックスがフォーカスを取得したときにのみレンダリングする必要があります。

私のスニペット

$(function() {
    $('#btnDialog').click(function() {
        $('#myDate').datepicker({
            title: 'Test Dialog'
        });
        $('#myDialog').dialog();
    });
});​

JS フィドル リンク: http://jsfiddle.net/UkTQ8/

4

3 に答える 3

9

開くときに日付ピッカーを作成し、閉じるときに破棄します。

$(function() {
    $('#btnDialog').click(function() {
        $('#myDialog').dialog({
            open: function() {
                $('#myDate').datepicker({title:'Test Dialog'}).blur();
            },
            close: function() {
                $('#myDate').datepicker('destroy');
            },
        });
    });
});

デモ: http://jsfiddle.net/UkTQ8/7/

于 2012-11-05T13:49:57.723 に答える
6

解決策:日付テキストボックスの前にダミー テキスト ボックスを追加します。

デモ: http://jsfiddle.net/UkTQ8/4/

<div id="myDialog" title="Text Dialog">

<input type="text" id="dummyDate" /> <!-- dummy textbox -->

<p>The textbox below should show the datepicker on focus, except for when the dialog opens.</p>
Enter date: <input type="text" id="myDate" />
</div>
于 2012-11-05T13:46:21.457 に答える