CODEWITHSUNDEEP
tailwind-cssflowbite
Muathcs
Muathcs

Reputation: 272

Flowbite datepicker does not show up when I click on the input field

I have a create-react-app project and I'm trying to add a datepicker to a form.

I'm using flowbite

I then added the plugin and content to the tailwind.config file

 plugins: [
        require('flowbite/plugin')
    ]


    content: [
        "./node_modules/flowbite/**/*.js"
    ]

and then added the css Link and JS script to the index.html file under the public directory.

<script src="../path/to/flowbite/dist/flowbite.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.2.1/flowbite.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.2.1/flowbite.min.js"></script>

and then I pasted the html to my react component's jsx.

<div class="relative max-w-sm">
  <div class="absolute inset-y-0 start-0 flex items-center ps-3.5 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 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>

But Now, when I click on it, nothing happens, a datepicker doesn't pop up.

Upvotes: 0

Views: 1277

Answers (1)

AL Faiz Ahmed
AL Faiz Ahmed

Reputation: 332

May be you are missing datepicker flowbite js file

<script src="../path/to/flowbite/dist/flowbite.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.2.1/flowbite.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.2.1/flowbite.min.js"></script>

<script src="../path/to/flowbite/dist/datepicker.js"></script>

Upvotes: 0

Related Questions