There should be a way to re-initialize a single Datepicker element

[lobot1010]

Is your feature request related to a problem? Please describe. I'm using HTMX to load content into the page dynamically. Some of this dynamic content consists of Datepicker inputs. When these inputs enter the DOM, the DOMContentLoaded event is NOT fired, so initDatepickers therefore doesn't run.

To get around this, I can manually wire up an event listener to HTMX content being loaded and run initDatepickers. However this re-initializes ALL the datepickers on the page when I would like to re-initialize them ad-hoc.

Describe the solution you'd like It would REALLY help if you added an initDatepicker(elementId: str) method that can be used in these ad-hoc cases. This would make re-initializing date pickers much easier.

Describe alternatives you've considered From the docs, it seems like Flowbite wants us to use the Javascript API to create Datepicker objects for these ad hoc. I am unable to do that using the minified JS file (there's no Datepicker constructor available for use). I'm using Flowbite in the context of Django templates without NPM and have no plans to set up Webpack in Django.

Additional context Appreciate your time

[lobot1010]

Follow up question - is there a reason why the Datepicker object isn't exported and available for use from the minified JS file? This is rather different than the API provided by the rest of Flowbite. I'm able to use the Modal constructor, why not the Datepicker?

Is the recommended alternative to use the datepicker-full.js file to get access to the full API?

[zoltanszogyenyi]

Hey @lobot1010,

Working on this feature now: https://github.com/themesberg/flowbite/tree/datepicker-instance

Cheers, Zoltan

[bldr1862]

Hey @lobot1010 , can you please share your workaround? I am having the same issue but have not been able to solve it

[bldr1862]

I am sharing here my solution:

{% block scripts %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/datepicker.min.js"></script>
<script>
    document.body.addEventListener('htmx:afterSwap', function (evt) {
        console.log("Found swap event!");
        if (evt.detail.target.id === "table-body") {
            Flowbite.initDatepickers();
        }
    });
</script>
{% endblock %}
`

[zoltanszogyenyi]

Hey everyone,

v2.4.1 is now released so the datepicker component is part of the main instance object:

https://flowbite.com/docs/components/datepicker/index.html#javascript-behaviour

It will now work exactly like any other component from Flowbite.

Cheers, Zoltan