範囲選択カレンダー(チェックイン/チェックアウト)

<div class="d10-07-12-wrap">
          <p class="d10-07-12-title">宿泊日程を選択(チェックイン→チェックアウト)</p>
          <div class="d10-07-12-grid">
            <span class="d10-07-12-w">月</span><span class="d10-07-12-w">火</span><span class="d10-07-12-w">水</span><span class="d10-07-12-w">木</span><span class="d10-07-12-w">金</span><span class="d10-07-12-w">土</span><span class="d10-07-12-w">日</span>
          </div>
          <p class="d10-07-12-summary">日付を選択してください</p>
        </div>

.d10-07-12-wrap{width:100%;max-width:260px;}
        .d10-07-12-title{font-size:11px;color:#666;margin:0 0 8px;text-align:center;}
        .d10-07-12-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;}
        .d10-07-12-w{font-size:10px;color:#999;text-align:center;padding-bottom:2px;}
        .d10-07-12-d{font-size:11px;text-align:center;padding:6px 0;border-radius:4px;color:#333;background:#f7f8fa;cursor:pointer;transition:background .2s ease,color .2s ease;}
        .d10-07-12-d:hover{background:#e6edff;}
        .d10-07-12-d.is-start,.d10-07-12-d.is-end{background:#2f6fed;color:#fff;font-weight:700;}
        .d10-07-12-d.is-range{background:#d7e6ff;}
        .d10-07-12-summary{font-size:11px;color:#2f6fed;margin-top:10px;text-align:center;font-weight:600;}

(function(){
          var root = document.getElementById('item-10-07-12');
          if(!root) return;
          var grid = root.querySelector('.d10-07-12-grid');
          var summary = root.querySelector('.d10-07-12-summary');
          for(var i=1;i<=14;i++){
            var d = document.createElement('span');
            d.className = 'd10-07-12-d';
            d.textContent = i;
            d.setAttribute('data-day', i);
            grid.appendChild(d);
          }
          var days = root.querySelectorAll('.d10-07-12-d');
          var start = null, end = null;
          function render(){
            days.forEach(function(d){
              var n = +d.getAttribute('data-day');
              d.classList.remove('is-start','is-end','is-range');
              if(start && n === start) d.classList.add('is-start');
              if(end && n === end) d.classList.add('is-end');
              if(start && end && n > start && n < end) d.classList.add('is-range');
            });
            if(start && end){
              summary.textContent = '7/' + start + ' 〜 7/' + end + '(' + (end - start) + '泊)';
            } else if(start){
              summary.textContent = 'チェックアウト日を選択してください';
            } else {
              summary.textContent = '日付を選択してください';
            }
          }
          days.forEach(function(d){
            d.addEventListener('click', function(){
              var n = +d.getAttribute('data-day');
              if(!start || (start && end)){
                start = n; end = null;
              } else if(n > start){
                end = n;
              } else {
                start = n;
              }
              render();
            });
          });
        })();