Bootstrap show.bs.modal / Datepicker show.bs.modal conflict

[kroeder]

Hi,

I found some weird behaviour when using Datepicker inside a Bootstrap v3 Modal.

I have something like this

$("#my-modal").on("show.bs.modal", function() {
    // reset my values
});

$("#my-datepicker").datepicker();

Everytime I click on a datepicker input my "reset my values" code gets executed
I found a solution here: http://stackoverflow.com/a/20059099/1909698

Which means my code works after adding:

$("#my-modal").on("show.bs.modal", function() {
    // reset my values
});

$("#my-datepicker").datepicker().on('show.bs.modal', function(event) {
    // prevent datepicker from firing bootstrap modal "show.bs.modal"
    event.stopPropagation();
});

Is it a bug or a feature? ;)

[kroeder]

Sorry, found the fix
#962

[kroeder]

Reopened, issue not solved
Somehow, my previous solution was saved in the browser cache...

Here's an example:
http://jsfiddle.net/8VcGT/4/

Just click on the button and then open datepicker

[pwolfert]

I think I know why it's doing this, but I don't really know who should be responsible for fixing it.

I've been experiencing a similar problem, except that I use the datepicker inline in a bootstrap modal. The end result is that when I first call .datepicker() on my div (while my modal has never been shown), it applies the class modal-open to my body (taking away my scrollbar)!

The problem is that, according to the jQuery documentation of on, the selector parameter "[filters] the descendants of the selected elements that trigger the event," so, because the datepicker is a child of the .modal dialog, when it fires the "show" event on itself, it gets caught by this listener of Bootstrap's:

$(document).on('show.bs.modal',  '.modal', function () { $(document.body).addClass('modal-open') })

At this point in the event handling, jQuery ignores the namespace .bs.modal and just tries to match the class .modal to one of the ancestors of the element that triggered it (and is successful). After researching it, I couldn't decide if this was a bug in jQuery or not 😕, and I don't know if Bootstrap would care to fix it on their end.

I temporarily fixed it for myself by only initializing the datepicker when I'm about to show it.

Thoughts? Should we take it to Bootstrap?

[vizjerai]

This can be fixed by putting a namespace on datepicker's events #642

[johnroach]

I would like to say that I too have come across this problem. Very annoying...

[alogonzac]

Just found the issue as well. Is there a solution for this already ?

Here is the modified fiddle showing the bug

Tried the suggestions at the top, none of them seems to work when the datepicker is a inline one, as you can see in the fiddle.

[SinnlosS]

I had the same issue with an 'hide.bs.modal'-event for the modal. It was triggered when datepicker inside the modal was closed.
Adding .on('hide',function(e){ e.stopPropagation() }) to my datepicker fixed this.

[mrlinnth]

Just faced with this issue in past a couple of hours.
We solved it by using "shown.bs.modal" instead of "show.bs.modal" on modal event.

$("#my-modal").on("shown.bs.modal", function() {
// reset my values
});

[lslucas]

I had the same problem but on the hide event, take the same path as the @Conmer described:

Instead of using hide.bs.modal I now use hidden.bs.modal. Works. Thanks @Conmer

            modal.on('hidden.bs.modal', function (event) {
                $(modal).remove();
            });

[haakym]

@mrlinnth thank you, this solved the issue for me!

shown.bs.modal instead of show.bs.modal

[chazzbg]

Sometimes it's not practical to swap 'show' for 'shown' event.
@SinnlosS solution works great

[othyn]

@SinnlosS Perfect, thank you. Applied the same to 'show' as well, highly annoying issue.

[Shaazaam]

+1 on this issue. A simple workaround is using shown.bs.modal instead, as others have stated. It shouldn't be too big a deal for most people. If you have to resort to stopping propagation, you're doing something wrong.

For the sake of seeing how long this has been an issue, I'd like to see some investigation on the matter.

[bioteck]

Using shown and hidden events instead of show and hide is not always possible. A better workaround is to check the event namespace:

modal.on('show.bs.modal', function(e) {
    if (e.namespace === 'bs.modal') {
        //
    }
});

[ebrost]

@bioteck Best solution. Thanks

[robert-ciro]

I agree @ebrost

[codymullins]

thanks @mrlinnth

[clickclickonsal]

Thanks @mrlinnth and I agree with @bioteck if you need to use the show event.

[JeancarloFontalvo]

Thanks mister @bioteck

[XavierColombel]

Thanks @mrlinnth!

[Pablo-Araya]

@bioteck
works great !!!

[robertkent87]

Has anyone got an example of how you do this?

$("#myModal").on('show.bs.modal', function(e) {
  if (e.namespace === 'bs.modal') {
    $(".my_date input").datepicker({
      format: "dd MM yyyy",
      weekStart: 1,
      maxViewMode: 2,
      todayBtn: true,
      daysOfWeekDisabled: "0,6",
      todayHighlight: true
    });
  }
});

doesn't appear to do anything? I get no console errors but the datepicker doesn't show up in my modal

[fboinett]

Just faced with this issue in past a couple of hours.
We solved it by using "shown.bs.modal" instead of "show.bs.modal" on modal event.

$("#my-modal").on("shown.bs.modal", function() {
// reset my values
});

You are a lifesaver

[kieranirving]

6 years later and this is still a problem.....

[membersound]

Omg I have the same issue and it is known for so long??
At least the initial suggestion using event.stopPropagation() on the datepicker itself fixes it globally on all datepickers.

[eduardo-mior]

I also came across this problem, my solution was to put a validation to know if the event came from Datepicker or modal.

dialog.on('show.bs.modal', function (e) {

    if (e && (e.target == this || e.namespace == "bs.modal")) {
        // Code here...
    }

}

[kamalOrion]

Hi,

I found some weird behaviour when using Datepicker inside a Bootstrap v3 Modal.

I have something like this

$("#my-modal").on("show.bs.modal", function() {
    // reset my values
});

$("#my-datepicker").datepicker();

Everytime I click on a datepicker input my "reset my values" code gets executed I found a solution here: http://stackoverflow.com/a/20059099/1909698

Which means my code works after adding:

$("#my-modal").on("show.bs.modal", function() {
    // reset my values
});

$("#my-datepicker").datepicker().on('show.bs.modal', function(event) {
    // prevent datepicker from firing bootstrap modal "show.bs.modal"
    event.stopPropagation();
});

Is it a bug or a feature? ;)

Hi,

I found some weird behaviour when using Datepicker inside a Bootstrap v3 Modal.

I have something like this

$("#my-modal").on("show.bs.modal", function() {
    // reset my values
});

$("#my-datepicker").datepicker();

Everytime I click on a datepicker input my "reset my values" code gets executed I found a solution here: http://stackoverflow.com/a/20059099/1909698

Which means my code works after adding:

$("#my-modal").on("show.bs.modal", function() {
    // reset my values
});

$("#my-datepicker").datepicker().on('show.bs.modal', function(event) {
    // prevent datepicker from firing bootstrap modal "show.bs.modal"
    event.stopPropagation();
});

Is it a bug or a feature? ;)

This workaround didn't work well for me.

So I did a check on the HTML node that trigger the event to execute my code when the modal hide or show.