现有日期选择器无周选择器功能，如何通过CSS模拟实现？

Got it, let's figure out how to simulate that week selection effect for your date picker! Since your server spits out a flat <tr> full of individual <td>s (no built-in week grouping) and users only select Saturdays, here are practical approaches you can take:

方法1：结合JS标记 + CSS变量（最灵活） #

This approach works even if you can't modify the server-generated HTML. The idea is to use JavaScript to mark the start of the selected week when a Saturday is clicked, then use CSS to highlight the entire week.

Steps: #

1. Add click handling to Saturday cells:
   When a user clicks a Saturday <td>, calculate the starting position of its week (e.g., if the Saturday is the 7th <td>, the week starts at 1; if it's the 14th, start at 8, etc.).
2. Mark the parent <tr>:
   Add a custom data attribute to the <tr> to store the week's starting index.
3. Use CSS variables to highlight the week:
   Leverage CSS calc() and variables to target all <td>s in the selected week.

Example Code:

// Assume Saturday cells can be identified (adjust this condition to match your setup)
document.querySelectorAll('td').forEach(td => {
  const isSaturday = /* your logic here, e.g., check if the date is a Saturday */;
  if (isSaturday) {
    td.addEventListener('click', () => {
      const allTds = Array.from(td.parentElement.children);
      const tdIndex = allTds.indexOf(td) + 1; // 1-based index
      const weekStart = tdIndex - 6; // Saturday is the 7th day of the week

      // Remove existing selection
      td.parentElement.removeAttribute('data-selected-week-start');
      // Add new selection marker
      td.parentElement.setAttribute('data-selected-week-start', weekStart);
    });
  }
});

/* Use CSS variables to dynamically target the week */
tr[data-selected-week-start] {
  --week-start: attr(data-selected-week-start number);
}

tr[data-selected-week-start] td:nth-child(n + var(--week-start)):nth-child(-n + calc(var(--week-start) + 6)) {
  background-color: #e3f2fd;
  border-radius: 4px;
}

方法2：后端配合添加周分组类（最省心） #

If you can coordinate with your backend team, ask them to add a shared class to all <td>s that belong to the same week (e.g., week-1, week-2). This makes highlighting trivial.

Example Server-Generated HTML: #

<tr>
  <td class="week-1">1</td>
  <td class="week-1">2</td>
  <td class="week-1">3</td>
  <td class="week-1">4</td>
  <td class="week-1">5</td>
  <td class="week-1">6</td>
  <td class="week-1 saturday">7</td>
  <td class="week-2">8</td>
  <!-- ... more cells ... -->
</tr>

JS + CSS for Highlighting: #

document.querySelectorAll('td.saturday').forEach(td => {
  td.addEventListener('click', () => {
    // Remove previous highlights
    document.querySelectorAll('td.week-highlight').forEach(cell => cell.classList.remove('week-highlight'));
    // Get the week class for the clicked Saturday
    const weekClass = Array.from(td.classList).find(cls => cls.startsWith('week-'));
    // Highlight all cells in the same week
    document.querySelectorAll(`td.${weekClass}`).forEach(cell => cell.classList.add('week-highlight'));
  });
});

td.week-highlight {
  background-color: #e3f2fd;
  border-radius: 4px;
}

方法3：纯CSS（适合固定周数场景） #

If your date picker only shows a fixed number of weeks (e.g., 6 weeks), you can use CSS :has() (supported in modern browsers) to highlight the week when a Saturday is selected.

Example CSS: #

/* Highlight week 1 when its Saturday (7th td) is active */
tr:has(td:nth-child(7).active) td:nth-child(-n+7) {
  background-color: #e3f2fd;
}

/* Highlight week 2 when its Saturday (14th td) is active */
tr:has(td:nth-child(14).active) td:nth-child(n+8):nth-child(-n+14) {
  background-color: #e3f2fd;
}

/* Add more rules for additional weeks as needed */

Note: This approach isn't dynamic, so you'll need to write a rule for each week in your date picker.

Quick Recommendation #

If you can't get backend support, go with Method 1—it's flexible and works with your existing HTML structure. If you can get backend changes, Method 2 is the cleanest solution.

内容的提问来源于stack exchange，提问作者YogaPanda