uxsolutions / bootstrap-datepicker

A datepicker for twitter bootstrap (@twbs)
Apache License 2.0
12.66k stars 6.06k forks source link

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

Open kroeder opened 10 years ago

kroeder commented 10 years ago

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 commented 10 years ago

Sorry, found the fix https://github.com/eternicode/bootstrap-datepicker/pull/962

kroeder commented 10 years ago

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 commented 10 years ago

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 :confused:, 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 commented 10 years ago

This can be fixed by putting a namespace on datepicker's events https://github.com/eternicode/bootstrap-datepicker/pull/642

johnroach commented 9 years ago

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

alogonzac commented 9 years ago

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 commented 9 years ago

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 commented 9 years ago

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 commented 9 years ago

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 commented 8 years ago

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

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

chazzbg commented 8 years ago

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

othyn commented 8 years ago

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

Shaazaam commented 8 years ago

+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 commented 8 years ago

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 commented 8 years ago

@bioteck Best solution. Thanks

robert-ciro commented 8 years ago

I agree @ebrost

codymullins commented 8 years ago

thanks @mrlinnth

clickclickonsal commented 8 years ago

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

JeancarloFontalvo commented 7 years ago

Thanks mister @bioteck

XavierColombel commented 7 years ago

Thanks @mrlinnth!

Pablo-Araya commented 5 years ago

@bioteck
works great !!!

robertkent87 commented 5 years ago

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 commented 4 years ago

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 commented 4 years ago

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

membersound commented 3 years ago

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 commented 3 years ago

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 commented 2 years ago

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.