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

Question

I have a modal, illustrated below,

When I select the input field that contains the date picker, the bootstrap modal event .on('show.bs.modal') gets triggered, which is super problematic because I'm taking all kinds of async action when the modal is legitimately shown. I'm of the opinion that the modal is already shown and this event should not be firing.

I have a listener on the bootstrap event 'show.bs.modal' as referenced 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 effectively, the listener is being triggered again which is subsequently calling the promise and associated callbacks, the triggering of the event is problematic because of course, the modal is already show and I don't want these callbacks/promise being run.

I added return if event.dates (event.dates being a property unique to the datepicker event), to basically short circuit this code in the event that the date-picker triggered the modal show event, but of course, this is hacky and I'd like to better understand why the datepicker itself is triggering the show event. Potentially, since my show even listener is tied to the class of the modal, the act of showing the datepicker probably inherits the target of the parent modal and is likely itself a modal, ie, the modal(datepicker) is shown and since the datepicker inherits from the parent modal, the event triggers as though it was the parent modal being 'shown'. Have I utterly confused this? (Actually, it seems clearer to me now, but still need to understand how to fix.)

Apomorphine

So does it reopen the modal or nothing is happening? – Irritative

@GreenFox I added some commentary to hopefully give you more insight. – Apomorphine

Answer 1

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

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

Tapp

I know this is old, but this solution caused bad things to happen when I tried it, like the initial date I set for the date field was not highlighted in the calendar, and clicking outside the calendar set the date field to empty. THe solution below from Isaac worked much better and had no bad side effects, that should be marked as the correct solution. – Blooper

Answer 2

Try this:

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

Finland

Answer 3

Use this

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

Psychologist

Answer 4

Check the namspace at the top of the show.bs.modal event and return if it doesn't match.

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

Definiens