Calendar Date Field

<div class='df'><label for='df1'>Date of birth</label><div class='df-w'><input id='df1' type='text' readonly placeholder='Select a date'><input id='df2' type='date' tabindex='-1' aria-hidden='true'><button type='button' id='dfb' aria-label='Open calendar'><svg width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3.5' y='5' width='17' height='15.5' rx='2.5'/><path d='M3.5 10h17M8 3v4M16 3v4'/></svg></button></div><p>Must match your ID document.</p></div>

.df{width:min(330px,88%);margin:auto;font-family:Inter,Arial,sans-serif;color:#111}.df label{display:block;font-size:14px;font-weight:500;margin-bottom:8px}.df-w{position:relative}.df-w #df1{width:100%;box-sizing:border-box;height:40px;padding:0 42px 0 14px;font:inherit;font-size:14px;background:#fff;border:1px solid #e5e5e5;border-radius:10px;outline:0;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.04);transition:border-color .15s,box-shadow .15s}.df-w #df1::placeholder{color:#a3a3a3}.df-w #df1:focus{border-color:#111;box-shadow:0 0 0 3px rgba(17,17,17,.08)}#df2{position:absolute;left:0;bottom:0;width:100%;height:1px;opacity:0;pointer-events:none}.df button{position:absolute;right:6px;top:5px;width:30px;height:30px;display:grid;place-items:center;border:0;background:none;color:#737373;border-radius:8px;cursor:pointer}.df button:hover{color:#111;background:#f4f4f4}.df p{margin:8px 0 0;font-size:12.5px;color:#737373}

const t=document.getElementById('df1'),d=document.getElementById('df2'),b=document.getElementById('dfb');const go=()=>{try{d.showPicker()}catch(e){d.focus();d.click()}};t.addEventListener('click',go);b.addEventListener('click',go);d.addEventListener('change',()=>{if(d.value){const x=new Date(d.value+'T00:00:00');t.value=x.toLocaleDateString(undefined,{year:'numeric',month:'short',day:'numeric'})}});