Datepicker and Timepicker not working on nextjs

[luismiguelmena]

I have copied the html and all the stuffs installed but the components are not working and showing correctly

Here is my code:
<div className="flex justify-center"> <div className="timepicker relative form-floating mb-3 xl:w-96"> <input type="text" className="form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none" placeholder="Select a date" /> <label htmlFor="floatingInput" className="text-gray-700"> Select a time </label> </div> </div>

[sajermann]

I have same problem in React without Nextjs (With Vite)

"react": "^18.0.0", "react-dom": "^18.0.0", "tw-elements": "^1.0.0-alpha12"

tailwind.config.js

module.exports = { darkMode: 'class', content: [ './src/**/*.tsx', './src/**/*.{html,js}', './node_modules/tw-elements/dist/js/**/*.js', ], theme: { extend: { colors: { brand: { 300: '#996DFF', 500: '#8257e6', }, }, borderRadius: { md: '4px', }, }, }, plugins: [require('tw-elements/dist/plugin'), require('tailwind-scrollbar')], };

index.html > <script src="node_modules/tw-elements/dist/js/index.min.js"></script>

[riesga]

Any solution?

[sageworksstudio]

https://tailwind-elements.com/docs/standard/forms/datepicker/

The example text is wrong. <input type="text" should be <input type="date"

[Twansparant]

No it should be type="text" otherwise it will use the browser default datepicker.
Could it be the underlying MDB Datepicker is only available on the MDB Pro Essential package?

[Trochonovitz]

Hi, we just have launched bunch of integration tutorials - both with CSR and SSR frameworks. If you have more questions about integration or you still got some problems with particular components, let us know by adding new issue / topic in discussions section (if there are some unclrear informations or just want let us know about something).

Next.js integration tutorial.