bootstrap-datepicker: Bootstrap show.bs.modal / Datepicker show.bs.modal conflict

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

About this issue

Original URL
State: open
Created 10 years ago
Reactions: 12
Comments: 27

Commits related to this issue

Fix Bootstrap and Datepicker show.bs.modal conflict Fix the conflict with Bootstrap and Bootstrap-datepicker show.bs.modal event. Original issue: https://github.com/uxsolutions/bootstrap-datepicke... — committed to vrnagy/yii2-modal-ajax by vrnagy 8 years ago

Most upvoted comments

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') {
        //
    }
});

+36

bioteck on Jun 24, 2016

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 });

+14

mrlinnth on Jul 24, 2015

6 years later and this is still a problem…

kieranirving on May 26, 2020

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

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

haakym on Nov 17, 2015

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();
            });

lslucas on Sep 15, 2015

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.

SinnlosS on Jul 1, 2015