Event Date Adder
Pick dates with Flatpickr and add them to a removable list.
Requires Bootstrap 5, Flatpickr. Add the CDN tags below to your page (styles in
<head>, scripts before </body>). The downloaded file already includes them.<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr@4.6.13/dist/flatpickr.min.css"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script><script src="https://cdn.jsdelivr.net/npm/flatpickr@4.6.13"></script><div class="card border-0 shadow-sm" style="max-width:380px"><div class="card-body">
<label class="form-label small fw-semibold">Add event date</label>
<div class="input-group mb-2"><input class="form-control" id="evDate" placeholder="Pick a date"><button class="btn btn-primary" id="evAdd">Add</button></div>
<ul class="list-group list-group-flush small" id="evList"></ul>
</div></div>flatpickr('#evDate',{dateFormat:'D, M j',minDate:'today'});
var list=document.getElementById('evList');
document.getElementById('evAdd').onclick=function(){var v=document.getElementById('evDate').value;if(!v)return;var li=document.createElement('li');li.className='list-group-item px-0 d-flex justify-content-between';li.innerHTML='<span>📅 '+v+'</span><button class="btn-close" style="font-size:.7rem"></button>';li.querySelector('button').onclick=function(){li.remove()};list.appendChild(li)};Free to use.This component uses Bootstrap 5, Flatpickr (linked above). Copy any file, or download a ready-to-open .html page with the CDN links already included.