Fixing issues when placing a datepicker inside a modal (I already propose a tested working solution in the description)

[carlosrafaelgn]

Expected behaviour

The component should work seamlessly inside Bootstrap's modals.

Actual behaviour

When placed inside modals, the action of showing and hiding the datepicker triggers the parent modal's events show and hide, actually preventing us from using those modal events if there is at least one datepicker inside the modal.

Datepicker version used

1.9.0 (and many others below it)

Example code

(place one or more datepickers inside a stantard Bootstrap modal).

Proposed fix

I don't have enough time to fork the repo, install all the build tools just to fix it and create a pull request. Given that I found several people complaining about this behavior at stackoverflow and all over the web, I thought it would be nice to share the solution I found.

All I did was to rename the show and hide events triggered by the datepicker:

show: function(){ ... this._trigger('datepicker.show'); ... },

and

hide: function(){ ... this._trigger('datepicker.hide'); ... },

Perhaps, instead of this hack (which I applied directly onto the minified version), there could be an option to add an event prefix when initializing the datepicker

var Datepicker = function(element, options){ ... this._process_options(options); this.eventPrefix = options.eventPrefix || ""; ... };

And then, that event prefix could be used not only with show and hide, but with all of the datepicker's events:

show: function(){ ... this._trigger(this.eventPrefix + 'show'); ... },

and so on...

I hope to have helped! 🙏

[ia5634]

Confirmed.

I just added "datepicker." to;

this.element.trigger({

...
type: 'datepicker.' + event,
...

It worked for me in all actions. Thanks for tips. Regards.

[rbraband]

Thank you for this Tipp 👍

[odysseyalive]

Yeah, that was a good suggestion. Worked for me too.

[dragonfly4]

Thank you, I had the same issue