Flowbite Datepicker does not work within components: VueJs

[pl-jay]

Describe the bug I'm using Vue 3 project and i needed datepicker inside form but datepicker doesn't pop up the date selection section when i click on it, but when the same code block put on inside main component's (App.vue) <template> , it works perfectly.

Expected behavior It supposed to work within other components, as it works on the main/entry components

Desktop (please complete the following information):

• OS: Ubuntu 22.04
• Browser : Microsoft Edge, Firefox, Chrome

[contactlakrita]

same issue did you find a solution @pl-jay ?

[zoltanszogyenyi]

Hey everyone,

I think that the best solution for this would be to build a custom Datepicker for Vu3 inside the Flowbite Vue library.

I'll keep the issue open though since maybe we can find a solution to have them load using the original data attributes and event listeners method.

[cl3mcg]

As of March 2024, the date picker still doesn't work in components. I tried the same method as @pl-jay and I face exactly the same issue. Basically, when using Vue 3, the date picker just doesn't work as soon as it is included in a component.

[romeocaillonmorisseau]

I too have had this problem, and as a solution I did this:

I put in the src/main.js file

import '../node_modules/flowbite/dist/datepicker'

it work for me

[zoltanszogyenyi]

Hey everyone,

We have released v2.4.1 and made the datepicker a core component of Flowbite:

• this means that it will work just like any other component
• it now has its own API of methods, options
• it can now be initialized via initFlowbite()
• it is part of the Instance Manager

https://flowbite.com/docs/components/datepicker/#max-and-min-dates

I have created a Vue starter repo with the datepicker configured as an example:

https://github.com/themesberg/tailwind-vue-starter

Cheers, Zoltan

[time-to-dev]

Does anyone else have the problem that the value in Data does not change when selecting the date despite v-model?

<input
    v-model="form.publish_until"
    @change="form.validate('publish_until')"
    type="text"
    id="datepicker-end"
    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"
    placeholder="Select date end"
    datepicker datepicker-buttons datepicker-autoselect-today
    aria-describedby="helper-text-publish_until"
/>

"flowbite": "^2.4.1", "flowbite-datepicker": "^1.3.0",