Bootstrap - Datepickerをクリックするとドロップダウンメニューが閉じます

Question

私はBootstrapと日付ピッカーを使って作業しています。私は、boostrapdowdownにdatepickerを追加しました。日付を選択すると、ドロップダウンは自動的に閉じます。詳細は画像を参照してください。

アクション1：私たちは、ドロップダウンリストを参照して、ドロップダウンボタンをクリックします。 アクション2：フィールをクリックします。私は動的に日付ピッカーを追加します。 アクション3の後：日付を選択するとき。ドロップダウンが近づいているので、ユーザーは操作1に戻ります。

ユーザーが日付をクリックした後です。ドロップダウンは終了しません。

私は次のコードを使用して、ドロップダウン内のテーブルに作用するが、日付ピッカーではクリックできないようにしています。

$(document).on('click', '.dropdown-menu', function(e) { 
      if ($(this).hasClass('keep-open-on-click')) { e.stopPropagation(); } 
     }); 

ドロップダウンを防ぐのに役立つものがありますか？

<div class="dropdown"> 
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true"><span class="icon16 icomoon-icon-bell"></span><span class="notification" id="notification_count">11</span> 
        </a> 
    <ul class="dropdown-menu keep-open-on-click"> 
    <li><a href="#">HTML</a></li> 
    <li><a href="#">CSS</a></li> 
    <li><a href="#">JavaScript</a></li> 
    </ul> 
</div> 

注：ユーザーがテーブルをクリックして日付を終了すると、datepickerが動的に追加されます。それは問題なのでしょうか？あなたのコードは動作するはずです

Answer 1

私はドロップから私の解決策を変更して、この問題を解決することができませんでしモーダルにダウン。

<div class="dropdown"> 
    <a href="#" data-toggle="modal" data-target="#NModal"><span class="icon16 icomoon-icon-bell"></span><span class="notification" id="notification_count">11</span> 
        </a> 
<div id="NModal" class="modal fade" role="dialog" style="min-width: 650px;"> 
<div class="modal-dialog"> 
<!-- My Code --> 
</div> 
</div> 

Answer 2

しかし

$(document).on('click', '.dropdown-menu', function(e) { 
     if ($(this).hasClass('keep-open-on-click')) { e.stopPropagation(); } 
    }); 

これは、クラスを探しています（「キープオープン・オン」）日付ピッカーではなく、ドロップダウンに。あなたは私が信じる親でそれを見つける必要があります。

$(document).on('click', '.datepicker', function(e) { 
     if ($(this).parents().find('keep-open-on-click')) { e.stopPropagation(); } 
    }); 

Answer 3

は私が正しくあなたの質問を理解していれば、あなたは日付ピッカーの選択のchangeイベントをキャプチャし、仕上げのデフォルトのアクションを阻止しようとしている

$(document).on('click', '.dropdown-menu', function(e) { 
      if ($(this).hasClass('keep-open-on-click')) { 
      e.hide(); 
      } 
     }); 

Answer 4

、このコードを試してみてください。例えば、あなたのコードがなければ

アップデート1 https://jsfiddle.net/shanabus/a5f82nsy/

、私はこのようなその何かを推測している：ここでは例

$('#your-datepicker-input').datepicker({ 
}).on('change', function(e) { 
    console.log("changed"); 
    e.preventDefault(); 
}); 

：これを試してみてくださいhttps://jsfiddle.net/shanabus/oghgwa5j/1/を - ここで我々がドロップダウンを持っていますその中にdatepickerがあります。そのテーブルセルをクリックすると日付ピッカーで入力に変わるようにコードを追加すると、ドロップダウンの機能がハイジャックされます。

このタイプのシナリオを処理するには、おそらくより優れたUI設計が必要です。テーブルの内側にある日付ピッカーのドロップダウンは、アコーディオンパネルの内側で、ドロップダウン内ではコードを使用するのと同じくらい使いづらいことがあります。

アップデート2

ここでは、より良い基本的なユースケースのドロップダウンを制御する方法についての素晴らしい答えです：https://stackoverflow.com/a/19797577/88732

Answer 5

これは非常に面倒でした。また、いくつかのBootstrapドロップダウンメニューには、いくつかの日付ピッカーがあります。私はこれを2つの方法で解決しました。

最初は、日付ピッカーが、他の、より多くのpermantソリューションはdatepicker.jsファイル自体を変更することでした

$('.yourDatePicker').on('hide', function(event) { 
    event.stopPropagation(); 
    $(this).closest('.yourDropDown').one('hide.bs.dropdown', function(ev) { 
     return false; 
    }); 
}); 

をクリックすると1時間をバブリングからのイベントを停止するようにjQueryを使用しています。あなたはそれが開いて割れた場合、あなたはこの

click: function(e){ 
     e.preventDefault(); 
     e.stopPropagation(); // <-- add this 
     var target = $(e.target).closest('span, td, th'), 
      year, month, day; 
     if (target.length === 1){ 
      switch (target[0].nodeName.toLowerCase()){ 

のようなあなたのdatepickersがあなたとの干渉を停止します。あなたは、この地域にe.stopPropagation（）関数を追加した場合は、この

click: function(e){ 
     e.preventDefault(); 
     var target = $(e.target).closest('span, td, th'), 
      year, month, day; 
     if (target.length === 1){ 
      switch (target[0].nodeName.toLowerCase()){ 
...ect... 

のようなコードを見つけます他のDOM要素もありますが、このソリューションはより広く普及しており、コード内の他の領域に影響しないことを確認するためのテストを行います。