日付ピッカー(入力+ポップ)

<div class="d10-02-02-wrap">
          <label class="d10-02-02-label">来店希望日</label>
          <input type="text" class="d10-02-02-input" readonly placeholder="日付を選択" value="">
          <div class="d10-02-02-pop">
            <div class="d10-02-02-head">2026年 7月</div>
            <div class="d10-02-02-days"></div>
          </div>
        </div>

.d10-02-02-wrap{position:relative;width:200px;font-size:12px}
        .d10-02-02-label{display:block;margin-bottom:6px;color:#64748b;font-size:11px}
        .d10-02-02-input{width:100%;box-sizing:border-box;padding:8px 10px;border:1px solid #cbd5e1;border-radius:8px;font-size:12px;cursor:pointer;background:#fff}
        .d10-02-02-input:focus{outline:2px solid #14b8a6;border-color:#14b8a6}
        .d10-02-02-pop{position:absolute;top:100%;left:0;margin-top:6px;background:#fff;border:1px solid #e2e8f0;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.12);padding:10px;width:200px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:.18s;z-index:5}
        .d10-02-02-pop.open{opacity:1;visibility:visible;transform:translateY(0)}
        .d10-02-02-head{text-align:center;font-weight:700;margin-bottom:6px;color:#0f172a;font-size:12px}
        .d10-02-02-days{display:grid;grid-template-columns:repeat(7,25px);gap:1px}
        .d10-02-02-day{width:25px;height:25px;display:flex;align-items:center;justify-content:center;border-radius:5px;cursor:pointer;font-size:11px;color:#334155}
        .d10-02-02-day:hover{background:#ccfbf1}
        .d10-02-02-empty{visibility:hidden}

(function(){
        var wrap=document.querySelector('#item-10-02-02 .d10-02-02-wrap');
        if(!wrap)return;
        var input=wrap.querySelector('.d10-02-02-input');
        var pop=wrap.querySelector('.d10-02-02-pop');
        var days=wrap.querySelector('.d10-02-02-days');
        var firstDay=3,total=31;
        for(var i=0;i<firstDay;i++){var e=document.createElement('div');e.className='d10-02-02-day d10-02-02-empty';days.appendChild(e);}
        for(var d=1;d<=total;d++){
          var c=document.createElement('div');c.className='d10-02-02-day';c.textContent=d;
          c.addEventListener('click',(function(day){return function(){
            input.value='2026/07/'+('0'+day).slice(-2);
            pop.classList.remove('open');
          };})(d));
          days.appendChild(c);
        }
        input.addEventListener('click',function(ev){ev.stopPropagation();pop.classList.toggle('open');});
        document.addEventListener('click',function(ev){if(!wrap.contains(ev.target))pop.classList.remove('open');});
      })();