Does not works in Bootstrap modal

[rez0n]

Hi @monim67 Thanks for this module! I faced with issue that it does not works in the Bootstrap modal as initialization JS waiting for DOMContentLoaded event, but modal does not fires this event.

django-flatpickr.js:53

  document.addEventListener('DOMContentLoaded', function (event) {
    findAndProcessFlatpickrInputs(document);
    document.addEventListener('DOMNodeInserted', function (event) {
      setTimeout(() => {
        if (event.target.querySelectorAll) findAndProcessFlatpickrInputs(event.target);
      });
    });
  });

Modifying django-flatpickr.js:53 this way - everything becamoe work correctly, I created another copy of this file to use in modals, would be cool to find solution for both cases (DOMContentLoaded and shown.bs.modal) but I have no ideas right now.

document.addEventListener('shown.bs.modal', function (event) {
    findAndProcessFlatpickrInputs(document);
    document.addEventListener('DOMNodeInserted', function (event) {
      setTimeout(() => {
        if (event.target.querySelectorAll) findAndProcessFlatpickrInputs(event.target);
      });
    });
  });

[pakal]

I encountered the same problem, and had to put a local copy of django-flatpickr.js (in static/vendor/django-flatpickr-2/js/django-flatpickr.js), that I referenced in config like so:

DJANGO_FLATPICKR = {
    "app_static_url": STATIC_URL + "vendor/django-flatpickr-2/",
}

I tweaked the code to support initialization on both MODAL and DOCUMENT loadings :

  function setupEventForFindAndProcessFlatpickrInputs() {
    if (window.isFlatpickrHandlerInitialized) return;
    window.isFlatpickrHandlerInitialized = true;

    findAndProcessFlatpickrInputs(document);
    document.addEventListener('DOMNodeInserted', function (event) {
      setTimeout(() => {
        if (event.target.querySelectorAll) findAndProcessFlatpickrInputs(event.target);
      });
    });
  }

  document.addEventListener('DOMContentLoaded', function (event) {  // Setup for initial page loading
    setTimeout(() => { setupEventForFindAndProcessFlatpickrInputs(); });
  });
  document.addEventListener('shown.bs.modal', function (event) {  // Setup for form in modal
    setTimeout(() => { setupEventForFindAndProcessFlatpickrInputs(); });
  });

PS : I added setTimeout() because locale is still loaded from CDN AFTER this script, so I needed this short delay to avoid a "locale not found" error