title: Bootstrap - dropdown menu close on click in Datepicker
body: <p>I am working with Bootstrap and date picker. I added a datepicker in boostrap dowpdown. When selecting the date the dropdown closes automatically. Refer the image for more info:</p>
  
  <p><a href="https://i.stack.imgur.com/dFlAD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dFlAD.png" alt="enter image description here"></a>
  <strong>Action 1:</strong> Click the dropdown button, We see the dropdown list.
  <strong>Action 2:</strong> When clicking on the fiel. I will dynamically add datepicker.
  <strong>After the action 3:</strong> When selecting on the Date. The Dropdown is getting close so The user is back to Action 1.</p>
  
  <p>What i am trying to do is After the user click the Date. The dropdown should not close.</p>
  
  <p>I am using the following code to prevent the click which workes on the table inside the dropdown but not with the date picker.</p>
  
  <pre><code>$(document).on('click', '.dropdown-menu', function(e) {
              if ($(this).hasClass('keep-open-on-click')) { e.stopPropagation(); }
          });
  </code></pre>
  
  <p>Can some one help me to prevent the dropdown close.</p>
  
  <pre><code>&lt;div class="dropdown"&gt;
    &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true"&gt;&lt;span class="icon16 icomoon-icon-bell"&gt;&lt;/span&gt;&lt;span class="notification" id="notification_count"&gt;11&lt;/span&gt;
                      &lt;/a&gt;
    &lt;ul class="dropdown-menu keep-open-on-click"&gt;
      &lt;li&gt;&lt;a href="#"&gt;HTML&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;CSS&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;JavaScript&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Note: The datepicker will be added dynamically when the user clicks on the table to end it the date. So is that the problem?</p>