Flowbite Datepicker not showing when clicked

Question

I have an input field, which is a flowbite datepicker field. However, when clicked, nothing happens... Do I need to import the js file as well?

Here's what I have:

<script setup>
import Datepicker from 'flowbite-datepicker/Datepicker';

document.addEventListener("DOMContentLoaded", function () {
    document.querySelectorAll("[datepicker]").forEach(function (datepickerEl) {
        const d = new Datepicker(datepickerEl);
        d.setOptions(datepickerOptions);

    });
});
</script>

and in the section of the vue file:

<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" id="datepickerEL">
</div>

So input field is shown correctly. But as said, nothing happens. I probably miss a portion of code here...

document.querySelectorAll("[datepicker]") seems a little strange, usually there is a tag, id or class there — Kiki
– Kiki, Commented Apr 9, 2024 at 11:18
Ok, is datepickerOptions a valid object like { format: 'yyyy-mm-dd', startDate: '2024-04-09', endDate: '2024-04-30', } ? In the code provided, the variable seems like it is not defined. — Kiki
– Kiki, Commented Apr 9, 2024 at 16:05

Jasper · Accepted Answer · 2024-04-09 18:21:28Z

0

Not yet a solution, however, I'm one step further.

The problem seems to be the modal....

When I'm using the datepicker in a 'normal' vue view, it works. However, when having the same code in a modal, the drop-down does not work.

answered Apr 9, 2024 at 18:21

Jasper

13512 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

nom_unique Over a year ago

Have you checked in your DOM if the drop-down exists/is actually there when you click your date-picker? My guess is that your dropdown does work but you don't see it on the page because is it behind the modal, or its position is alterned because of the modal's position. That means you have a css problem. Just a guess!!

Collectives™ on Stack Overflow

Flowbite Datepicker not showing when clicked

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related