themesberg / flowbite-datepicker

A Tailwind CSS datepicker built with vanilla JavaScript
https://flowbite.com/docs/components/datepicker/
MIT License
139 stars 43 forks source link

How can i add flowbite-datepicker in nuxt3 #19

Open truong-ne opened 1 year ago

truong-ne commented 1 year ago

https://flowbite.com/docs/plugins/datepicker

i try add flowbite-datepicker to package then use them in my test.vue but didn't work please helpme


    <div class="relative max-w-sm">
        <div class="absolute inset-y-0 left-0 flex items-center pl-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 pl-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>
</template>

<script setup>
useHead(() => ({
    link: [
        {
            href: 'https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.8.0/datepicker.min.js  '
        }
    ]
}))
</script>```
truong-ne commented 1 year ago

"vue": "^3.3.4", "flowbite": "^1.7.0", "flowbite-datepicker": "^1.2.2", "nuxt": "^3.6.2"

mo9a7i commented 1 year ago

https://vue-tailwind-datepicker.com/advanced-features.html