web-dev-qa-db-ja.com

jQuery UI datepickerがダイアログ内で自動的に開きます

JQueryダイアログオブジェクト内で使用される日付ピッカーがあります。ダイアログのコンテンツのソースは、.load()を使用してロードされます。ダイアログ内で、テキスト入力用の日付ピッカーを作成するスクリプトを作成しました。

$("#date").datepicker({ ... });

初めてダイアログを開いたとき-すべて問題ありませんが、ダイアログを閉じて再度開くと、日付ピッカーが自動的にトリガーされます（autoOpen:falseのようなオプションはありません）これを防ぐ方法はありますか、または何がいけないの？

jqueryajaxjquery-uidialogdatepicker
29
turezky

私はこの正確な問題を抱えており、tvanfossonのテクニックをわずかに変更するだけで解決しました。何らかの理由で、以下のように「クリック」イベントを手動でdatepickerフィールドにアタッチする必要がありました。

 $('#dialog').dialog({
 open: function(event, ui) {
    $(ui).find('#date').datepicker().click(function(){
        $(this).datepicker('show');
    });
 },
 close: function(event,ui) {
    $(ui).find('#date').datepicker('destroy');
 }});

（申し訳ありません-tvanfossonの投稿へのコメントとしてこれを投稿することをお勧めしますが、必要な担当者がいません。）

15
belacqua

私が見つけたはるかに簡単な方法：

$("#dialogPopper").click(
                    function() {
                        $("#date").datepicker("disable");
                        $("#dialog").dialog("open");
                        $("#date").datepicker("enable");
                        return false;
                    }
                  );
33
Hupperware

ダイアログの最初に日付ピッカーフィールドを置くと、フィールドが自動的に開きます。ダイアログの最初に非表示の入力を配置できます。

<input type="text" style="width: 0; height: 0; top: -100px; position: absolute;"/>
23
jsonx

ダイアログを閉じるときに日付ピッカーを破棄し、ダイアログの作成にスクリプトとして含めるのではなく、ダイアログのopenイベントハンドラーで作成することを検討してください。

 $('#dialog').dialog({
     open: function(event, ui) {
        $(ui).find('#date').datepicker();
     },
     close: function(event,ui) {
        $(ui).find('#date').datepicker('destroy');
     }
 });

さまざまなイベント/メソッドを試して、本当に再作成する必要があるかどうかを確認することもできますが、これでうまくいくと思います。

8
tvanfosson

その理由は、モーダルフォーム内の最初の項目が日付ピッカーのテキストフィールドであり、モーダルが発生すると、アクティブなコントロールは日付ピッカーを含むコントロールです。

私は2つの代替ソリューションを見つけました：

  1. フィールドの順序を変更します。日付ピッカーを使用しないでください。

  2. 別のコードのフィールドで日付ピッカーを設定しないでください。ダイアログを開く関数内で設定してください（$("#dialog").dialog("open");を開いた直後）。

5
Juliandrea85

ピッカーが自動的に開く理由は、ピッカーを初めて開いた後も入力フィールドがフォーカスされたままであるためです。

あなたはそれをぼかす必要があります：

$input.datepicker({
  onClose: function(dateText) {
    $(this).trigger('blur');
  }
});
4
Pawel Furmaniak

私は同様の問題を抱えていました。 jquery uiダイアログ内にjquery datepickerがあります。 IEでダイアログを開いたときに日付ピッカーが自動的に開いていました。FirefoxまたはChromeではそうではありませんでした... $（documentで作成時に日付ピッカーを無効にすることで問題を修正しました）.ready like：

$('.ConfirmMove #from').datepicker({
  duration: ''
}).datepicker('disable');

次に、この日付ピッカーを含むダイアログを開いたときに、ダイアログのopenイベントハンドラーでそれを有効にしました。

$(".ConfirmMove").dialog({
  close: function() { 
     $('.ConfirmMove #from').datepicker('disable'); 
  },
  open: function() {
     $('.ConfirmMove #from').datepicker('enable');
  }
});

また、ダイアログを閉じるときは、これを無効に戻すことを忘れないでください。

これにより、ダイアログを開いたり閉じたりするたびに日付ピッカーを破棄して再作成することもありません。

2
EtienneT

それは単なるダイアログのフォーカスです： api.jqueryui.com/dialog/

ダイアログを開くと、フォーカスは自動的に次と一致する最初のアイテムに移動します

  1. Autofocus属性を持つダイアログ内の最初の要素
  2. ダイアログのコンテンツ内の最初の：tabbable要素
  3. ダイアログのボタンペイン内の最初の：tabbable要素
  4. ダイアログの閉じるボタン
  5. ダイアログ自体

解決策は、autofocus以外のフィールドでdatepicker属性を使用することです。

2
user1080588

これは私が私の問題を修正するためにしたことです。

このコードはダイアログの作成にあります。

document.getElementById('date').disabled = true;
setTimeout('document.getElementById("date").disabled = false;', 100);

このようにして、ダイアログが開くと、別のコントロールにフォーカスが移ります。

タイムアウトをテストして遅延を小さくすることもできますが、100で十分でした。

1
Zorkind

何らかの理由で、イニシャライザのアニメーションオプションを入力すると、カレンダーがこの動作を停止しました。

showAnim：ドロップ

0
thiago marini

ソースコードから私はそれを見つけましたjQuery.Dialogは常にダイアログ内の要素のfocusinイベントを追跡し、ダイアログがアクティブ状態になった後、その要素のfocusイベントをトリガーします。この動作を防ぐには、フォーカスされている要素からのバブリングイベントの伝播を停止します。

$("#input").on("focusin", function (e) {
   return false; // or e.stopPropagation();
}).datepicker();
0
hawk

私はこれが古い質問であることを知っていますが、私のために働いた1つの解決策がカレンダーアイコンをトリガーすることでした：

$( ".date" ).datepicker({
  showOn: "button",
  buttonImage: "../css/imgs/calendar.gif",
  buttonImageOnly: true
});
0
bena45