Calendar Date Picker

<div class="card border-0 shadow-sm" style="max-width:280px"><div class="card-body">
  <div class="d-flex justify-content-between align-items-center mb-2"><button class="btn btn-sm btn-light" id="dpPrev">‹</button><b class="small" id="dpTitle"></b><button class="btn btn-sm btn-light" id="dpNext">›</button></div>
  <div class="d-grid gap-1 small text-center text-secondary" style="grid-template-columns:repeat(7,1fr)"><div>S</div><div>M</div><div>T</div><div>W</div><div>T</div><div>F</div><div>S</div></div>
  <div class="d-grid gap-1 mt-1" id="dpGrid" style="grid-template-columns:repeat(7,1fr)"></div>
</div></div>

var cur=new Date(),sel=null,grid=document.getElementById('dpGrid'),title=document.getElementById('dpTitle');
function render(){title.textContent=cur.toLocaleString(undefined,{month:'long',year:'numeric'});var y=cur.getFullYear(),m=cur.getMonth(),first=new Date(y,m,1).getDay(),days=new Date(y,m+1,0).getDate(),h='';for(var i=0;i<first;i++)h+='<div></div>';for(var d=1;d<=days;d++){var on=sel===y+'-'+m+'-'+d;h+='<button class="btn btn-sm '+(on?'btn-primary':'btn-light')+' p-1" data-d="'+d+'" style="font-size:.75rem">'+d+'</button>'}grid.innerHTML=h;grid.querySelectorAll('[data-d]').forEach(function(b){b.onclick=function(){sel=y+'-'+m+'-'+b.dataset.d;render()}})}
document.getElementById('dpPrev').onclick=function(){cur.setMonth(cur.getMonth()-1);render()};
document.getElementById('dpNext').onclick=function(){cur.setMonth(cur.getMonth()+1);render()};
render();