如何在HTML/JS中实现条件式自动更新日期功能？

Got it, let's break down how to build this feature based on your Excel example first. Looking at your data, we can nail down the core rules clearly:

• Delivery dates are always Saturdays
• Cycle & delivery rules:
  • Each cycle runs from Thursday to the following Wednesday (7 days total)
  • Any order placed within a cycle will have its delivery date as the Saturday right after the cycle ends
  • Cycle numbers increment by 1 for each subsequent Thursday-to-Wednesday cycle (starting with your first cycle: Thu,26.04.18 to Wed,02.05.18 → Cycle 1, delivery Sat,05.05.18)

Complete Implementation #

HTML Structure

We'll create a simple, user-friendly interface with a date picker and result displays:

<div class="date-tool">
  <label for="orderDate">下单日期:</label>
  <input type="date" id="orderDate" />
  
  <div class="output">
    <p>交付日期: <span id="deliveryDate">-</span></p>
    <p>周期数: <span id="cycleCount">-</span></p>
  </div>
</div>

JavaScript Logic

We'll write helper functions to handle date formatting, cycle calculation, and auto-update when the user selects a new date:

// Helper to format dates to match your Excel style (e.g., "周一, 30.04.18")
function formatDate(date) {
  const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
  const day = String(date.getDate()).padStart(2, '0');
  const month = String(date.getMonth() + 1).padStart(2, '0'); // JS months are 0-indexed
  const year = String(date.getFullYear()).slice(-2);
  const weekdayName = weekdays[date.getDay()];
  return `${weekdayName}, ${day}.${month}.${year}`;
}

// Calculate delivery date and cycle count from order date
function getDeliveryDetails(orderDate) {
  const orderDay = orderDate.getDay(); // 0 = Sunday, 1 = Monday, ..., 6 = Saturday
  let deliveryDate = new Date(orderDate);
  let cycleCount = 1;

  // Find the start of the Thursday-to-Wednesday cycle that the order falls into
  const daysSinceLastThursday = (orderDay - 4 + 7) % 7;
  const cycleStartThursday = new Date(orderDate);
  cycleStartThursday.setDate(orderDate.getDate() - daysSinceLastThursday);

  // The cycle ends on the Wednesday 6 days after the start Thursday
  const cycleEndWednesday = new Date(cycleStartThursday);
  cycleEndWednesday.setDate(cycleStartThursday.getDate() + 6);

  // Delivery date is 3 days after cycle end (Saturday)
  deliveryDate.setDate(cycleEndWednesday.getDate() + 3);

  // Calculate cycle count based on your initial cycle start (Thu,26.04.18)
  const initialCycleStart = new Date('2018-04-26');
  const timeDiff = cycleStartThursday - initialCycleStart;
  const daysDiff = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
  cycleCount = Math.floor(daysDiff / 7) + 1;

  return {
    deliveryDate: formatDate(deliveryDate),
    cycleCount: cycleCount
  };
}

// Set up auto-update when the order date changes
document.getElementById('orderDate').addEventListener('input', function(e) {
  const selectedDate = new Date(e.target.value);
  if (!isNaN(selectedDate.getTime())) {
    const details = getDeliveryDetails(selectedDate);
    document.getElementById('deliveryDate').textContent = details.deliveryDate;
    document.getElementById('cycleCount').textContent = details.cycleCount;
  } else {
    // Reset if invalid date is entered
    document.getElementById('deliveryDate').textContent = '-';
    document.getElementById('cycleCount').textContent = '-';
  }
});

// Optional: Set default date to today and load initial results
const today = new Date();
document.getElementById('orderDate').valueAsDate = today;
const initialDetails = getDeliveryDetails(today);
document.getElementById('deliveryDate').textContent = initialDetails.deliveryDate;
document.getElementById('cycleCount').textContent = initialDetails.cycleCount;

How It Works #

1. Date Formatting: The formatDate function converts JavaScript's native date objects into the exact string format you used in your Excel example.
2. Cycle Identification: We first figure out which Thursday-to-Wednesday cycle the selected order date belongs to by backtracking to the most recent Thursday.
3. Delivery Calculation: The delivery date is always the Saturday right after the cycle's end (Wednesday).
4. Cycle Count: We count how many full 7-day cycles have passed since your initial cycle start (Thu,26.04.18) to get the cycle number.
5. Auto-Update: Every time the user picks a new date, the script recalculates and updates the results instantly.

Test with Your Example Dates #

• Input 2018-04-30 (周一,30.04.18) → Output: 周六, 05.05.18 (周期数 1)
• Input 2018-05-03 (周四,03.05.18) → Output: 周六, 12.05.18 (周期数 2)
• Input 2018-05-06 (周日,06.05.18) → Output: 周六, 12.05.18 (周期数 2)

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