I am using tailwind's datepicker and I add new items by clicking a button:
<html>
<head>
<!-- ... -->
<script src="https://unpkg.com/flowbite@1.5.1/dist/datepicker.js"></script>
</head>
<body>
<!-- ... -->
<input datepicker type="text" placeholder="Select date">
<button>Add</button>
<!-- ... -->
<script>
document.querySelector('button').addEventListener('click', function() {
var input = document.createElement('input');
input.setAttribute('datepicker', '');
document.body.appendChild(input);
document.querySelectorAll('[datepicker]').forEach(function(datepickerEl) {
new Datepicker(datepickerEl, getDatepickerOptions(datepickerEl));
// ❌ Unhandled Promise Rejection: ReferenceError: Can't find variable: Datepicker
});
});
</script>
</body>
</html>
Once a new item has been added, it does not have the datepicker. How can I re-initate the datepicker to all new items?