DatePicker is not working in React

[yzidanNqood]

I followed this docs: https://flowbite.com/docs/plugins/datepicker/#getting-started

but all what i get is the input without the js functionality to show/hide the date

in component.jsx

  <div className="relative max-w-sm">
            <div className="pointer-events-none absolute inset-y-0 start-0 flex items-center ps-3.5">
              <svg
                className="h-4 w-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"
              className="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 ps-10 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
              placeholder="Select date"
            />
          </div>

this in index.js

import 'flowbite/dist/datepicker';

[vineet-mi]

i wanted to know that have you installed flowbite on your app this way?

1. Install the package npm install tailwind-datepicker-react or yarn add tailwind-datepicker-react

2. Added the styles to your tailwind.config.js file?

module.exports = { ... content: [ ... "./node_modules/tailwind-datepicker-react/dist/*/.js", // <--- Add this line ],

};

[vineet-mi]

I can Help you with that as flowbite react support with date picker is quite different in use

[zoltanszogyenyi]

Please use the datepicker from Flowbite React: https://www.flowbite-react.com/docs/components/datepicker