Bootstrap-datepicker: Datepicker inside bootstrap modal triggers show.bs.modal event on field focus

Created on 15 Apr 2018  路  3Comments  路  Source: uxsolutions/bootstrap-datepicker

Expected behaviour

Focusing on a Bootstrap Datepicker field should not trigger the "show.bs.modal" event.

Actual behaviour

Focusing on a Bootstrap Datepicker field triggers "show.bs.modal" event.
It happens for "hide.bs.modal" also.

Datepicker version used

Datepicker - 1.8.0
Bootstrap 4.0

Example code

https://jsfiddle.net/aq9Laaew/6718/

Most helpful comment

@papakay as a workaround you can use this:

$('#register-modal').on('hidden.bs.modal', function(event){

    if ($(event.target).is('#register-expires-at-field')) { // the id of the element with datepicker
        return;
    }

    //
});

All 3 comments

Please is there an update on this. I'm also having similar issue.

Thanks.

@papakay as a workaround you can use this:

$('#register-modal').on('hidden.bs.modal', function(event){

    if ($(event.target).is('#register-expires-at-field')) { // the id of the element with datepicker
        return;
    }

    //
});

Than you very much @alexandrubau for the trick, you saved my day!!! :+1:
Anyway, I noticed the problem is actually with the modal opening (not closing), so I had to correct your solution with the event show.bs.modal.
Here is my working code:

$('#register-modal').on('show.bs.modal', function(event) {
    if ($(event.target).is('#register-expires-at-field')) { // the id of the element with datepicker
        return;
    }
    // ...
});
Was this page helpful?
0 / 5 - 0 ratings