Bootstrap - dropdown menu close on click in Datepicker

Question

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:

Action 1: Click the dropdown button, We see the dropdown list. Action 2: When clicking on the fiel. I will dynamically add datepicker. After the action 3: When selecting on the Date. The Dropdown is getting close so The user is back to Action 1.

What i am trying to do is After the user click the Date. The dropdown should not close.

I am using the following code to prevent the click which workes on the table inside the dropdown but not with the date picker.

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

Can some one help me to prevent the dropdown close.

<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>

Note: The datepicker will be added dynamically when the user clicks on the table to end it the date. So is that the problem?

I am not worried about the datepicker closing, My drop down menu gets closing after i select the date. @JB06 — DonOfDen, Apr 12 '16 at 12:16
Is it because the click is passing through the datepicker causing the next section behind it to open? Or does it just close? — JB06, Apr 12 '16 at 12:25
It just close the dropdown.. When i open again.. we see the date was selected in the editbox. — DonOfDen, Apr 12 '16 at 12:26
The datepicker library must use the same class that's assigned to your dropdown to close the datepicker. Try turning off autoclose in the datepicker and see if it still happens. — JB06, Apr 12 '16 at 12:27
Your design could be too ambitious. What about using a modal popup to host your accordion panel instead? — shanabus, Apr 12 '16 at 13:21
That was the initial though but dropdown looked good. :) @shanabus — DonOfDen, Apr 12 '16 at 13:35

score 2 · Answer 1 · answered Dec 08 '17 at 15:09

This one was very troublesome. I also have a couple of datepickers located within some Bootstrap drop-down menus. I solved this using two ways.

The first uses jQuery to stop the event from bubbling up one time when the DatePicker is clicked

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

The other, more permant solution was to change the datepicker.js file itself. If you crack it open you will find code that looks like this

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...

If you add a e.stopPropagation() function to this area, like this

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()){

your datepickers will stop interfering with your other DOM elements, though this solution is more widespread, and I would test to make sure it doesn't impact other areas in your code.

Mazer Rakham · Answer 2 · 2016-04-12T12:37:35.560

1

Your code should work BUT

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

This is looking for the class('keep-open-on') on the datepicker, not the dropdown. You need to find it in the parent I believe.

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

Should work.

edited Apr 12 '16 at 12:37

answered Apr 12 '16 at 12:20

Mazer Rakham

43
7

The problem is not with the date picker can u see the question? – DonOfDen Apr 12 '16 at 12:24
Yes but I did not understand it, why don't you make a pen for it so we can help you better there buddy. – Mazer Rakham Apr 12 '16 at 12:28
Are you talking about the dropdown of the accordion widget? – Mazer Rakham Apr 12 '16 at 12:30

score 1 · Answer 3 · answered Apr 12 '16 at 12:25

1

Try this code,

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

answered Apr 12 '16 at 12:25

Prabhat Sinha

1,500
20
32

I tried ur code and it just activates other unwanted functions. But the problem still remains. – DonOfDen Apr 12 '16 at 12:28

score 1 · Answer 4 · edited May 23 '17 at 11:59

If I understand your question correctly, you are trying to capture the change event of the datepicker selection and prevent the default actions from finishing. Try this:

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

Example here: https://jsfiddle.net/shanabus/a5f82nsy/

Update 1

Without your code for an example, I'm guessing its something like this: https://jsfiddle.net/shanabus/oghgwa5j/1/ - here we have a dropdown with a datepicker inside of it. When I add code so that clicking that table cell turns it into an input with a datepicker, it hijacks the functionality of the dropdown - probably because its a dropdown within a dropdown.

Perhaps you will need a better UI design to handle this type of scenario. A datepicker dropdown inside of a table, inside of an accordion panel, inside of a dropdown might be as tricky to use as it is to code.

Update 2

Here is a great answer on how to better control the dropdown in basic use cases: https://stackoverflow.com/a/19797577/88732

U dont understand. My problem is the dropdown is getting close not with the datepicker. I used ur code still not working.. — DonOfDen, Apr 12 '16 at 12:57
Help us understand. Lots of answers here and none of them work? Perhaps your question is not clear. Post some code, that would help. — shanabus, Apr 12 '16 at 12:59

score 0 · Accepted Answer · answered Apr 12 '16 at 13:47

I could not able to solve this issue so I changed my solution from drop-down to Modal.

<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>

Bootstrap - dropdown menu close on click in Datepicker

5 Answers5