Datepicker and HTMX

[tombal98]

I'm using flowbite with htmx and i want to use a datepicker in a dynamically loaded content. I'm using v.2.3.0 and i put in my layout a js with :

htmx.onLoad(function (elt) { initFlowbite(); })

It's not working. I try on my htmx call :

hx-on="htmx: afterSettle: initFlowbite();" but it's not working

Here is my flowbite picker :

<div class="relative max-w-sm">
    <div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
        <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
            <path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z" />
        </svg>
    </div>
    <input datepicker datepicker-autohide type="text" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full ps-10 p-2.5  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Select date">
</div>

[reubenfirmin]

What's not working? I'm using flowbite + htmx together, and it generally works well.

Try tying to htmx.onLoad rather than afterSettle.

[tombal98]

I try but it's not working and no error in DEV TOOLS. Did you already use the date picker because it's ok with other flowbite components but not with the date picker If i put the picker in my layout it's ok but not in a loading content with HTMX.

I have a link in my layout :

<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/datepicker.min.js"></script>
<script src="https://unpkg.com/htmx.org"></script>

htmx.onLoad(function (elt) {
    initFlowbite();
})

<a href="#" hx-get="/Recherche" hx-trigger="click" hx-target="#contenusite" hx-swap="innerHTML" hx-on="htmx: load: initFlowbite();">Recherche FDSE</a>

My view (Recherche) contains only my date picker :

<div class="relative max-w-sm">
    <div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
        <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
            <path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z" />
        </svg>
    </div>
    <input datepicker datepicker-autohide type="text" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full ps-10 p-2.5  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Select date">
</div>

I

Nothing happens after loading my view in the DIV (contenusite)

Thanks for your help

[lobot1010]

I am having the same issue. Was anybody able to get this working?

My initial thought was that I would have to re-initialize my Datepickers using the Datepicker API that Flowbite provides afterSettle, however this API seems to be only available when using Datepickers installed via the NPM context. What am I missing here? Is it possible to manually initialize Datepickers without installing via NPM?

Edit: I did some more digging. You can re-initialize the date pickers manually by running Flowbite.initDatepickers after the htmx afterSettle event. It's still not great because this assumes ALL of the date pickers need to be re-initialized, which means if you have 5 date pickers on your page already and HTMX brings 1 more into your page, you will end up re-initializing 5 date pickers.

Edit edit: Here's the solution - if you also import the datepicker-full.min.js file, you have access to the full Datepicker API. In your afterSettle you can just initialize your Datepicker manually.

[zoltanszogyenyi]

Hey @reubenfirmin, @tombal98, @lobot1010,

We released v2.4.1 and this makes the datepicker a component which means that:

• it is now available in the instances object
• it has an API from Flowbite like setting dates, getting dates etc
• it will also be initialized when calling initFlowbite()

Please read more here:

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

Cheers, Zoltan