Why does bootstrap-datepicker trigger the show.bs.modal trigger when it is displayed?

Question

I have a modal shown below

When I select an input field that contains a date picker, the modular .on event is triggered ('show.bs.modal'), which is very problematic because I accept all kinds of asynchronous actions when the modal is legitimately shown. I believe that the modal has already been shown, and this event should not shoot.

I have a listener in the bootstrap event 'show.bs.modal', as shown below,

handleModalLaunch: () -> $(@modalClass).on 'show.bs.modal', (event) => return if event.dates promise = new Promise ( (resolve, reject) => @setModalData(event) if (@interactionData) resolve(@interactionData) else reject(false) ) promise.then( (results) => @trigger 'setRooms', @callBacks @trigger 'setStudentInfo', @callBacks (err) -> err ) 

And indeed, the listener starts again, which subsequently causes the promise and the associated callbacks, the event triggering is problematic, because of course the modal ones already show, and I don’t want these callbacks / promises to be executed,

I added return if event.dates ( event.dates , which is a property unique to the datepicker event) to basically shorten this code if the date selector triggered a modal show event, but of course it is a hacker and I would like to better understand why datepicker launches the show itself. Potentially, since my display of even the listener is tied to the modal class, the datepicker display action probably inherits the target of the parent modal and, most likely, is modal, i.e. The modal (datepicker) is shown and from the moment the datepicker is inherited from the parent modal event, the event is triggered as if it were the parent modal "shown". Have I completely embarrassed this? (Actually, it seems clearer to me, but I still need to figure out how to fix it.) Cheers,

Jd

Answer 1

This is a bug in the date picker library. You can track it on github here . There is a workaround given by @kroeder

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

Answer 2

Use this

 $(date-picker-selector).on("show", function(e){ e.preventDefault(); e.stopPropagation(); }).on("hide", function(e){ e.preventDefault(); e.stopPropagation(); }); 

Answer 3

Try the following:

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