Tailwind Flowbite Datepicker in a popover
HTML
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.6.4/flowbite.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.6.4/flowbite.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.6.4/datepicker.min.js"></script>
<div class="relative flex-none w-28">
<button
class="py-2 px-4 rounded-lg focus:outline-none focus:ring-2 focus:ring-opacity-75 justify-center hover:ring-2"
data-popover-target="start-popover"
data-popover-trigger="click">
<div class="font-mono text-lg whitespace-nowrap">
Click me
</div>
</button>
</div>
<div
data-popover
id="start-popover"
role="tooltip"
class="
absolute
z-10
invisible
inline-block
font-light
text-gray-500
transition-opacity
duration-200
bg-white
border
border-gray-200
rounded-lg
shadow-sm
opacity-0
w-80
dark:bg-gray-800
dark:border-gray-600
dark:text-gray-400">
<div class="p-3 space-y-2">
<div inline-datepicker data-date="03/13/2023" data-entry-target="datepicker"></div>
</div>
<div data-popper-arrow></div>
</div>