HTML/JavaScript日期选择器：输出起始日期后续周/月日期问题

Hey there! Let's fix that remaining issue you're stuck on—getting those calculated week/month dates into your paragraph elements. I've reviewed your code, and here's a straightforward way to implement the missing logic:

Key Observations & Quick Fixes First #

First, your current submit() function only handles showing/hiding the output sections, but it doesn't include the date calculation or population logic. We'll add that using Moment.js, which you're already leveraging for date formatting.

Also, there's a typo in your HTML: the last <p> tag in outputWeeks is incomplete (<p id="da</p>). Make sure to fix that to something like <p id="dataW13">DD/MM/YYYY</p> to avoid runtime errors.

Modified submit() Function #

Replace your existing submit() function with this updated version:

function submit() {
  var type = document.getElementById("selectType").value;
  // Grab the selected start date and parse it into a Moment object
  const startDate = moment(document.querySelector('input[type="date"]').value, "YYYY-MM-DD");

  if (type === "Months") {
    document.getElementById("outputMonths").className = "output";
    document.getElementById("outputWeeks").className = "hidden";

    // Calculate and populate 12 monthly dates
    for (let i = 1; i <= 12; i++) {
      // Clone the start date to avoid modifying the original mutable Moment object
      const calculatedDate = startDate.clone().add(i, 'months').format('DD/MM/YYYY');
      // Update the corresponding paragraph element
      document.getElementById(`dataM${i}`).textContent = calculatedDate;
    }
  } else {
    document.getElementById("outputMonths").className = "hidden";
    document.getElementById("outputWeeks").className = "output";

    // Calculate and populate weekly dates (adjust loop limit to your needs)
    for (let i = 1; i <= 52; i++) {
      const weekElement = document.getElementById(`dataW${i}`);
      // Skip if element doesn't exist (avoids errors from incomplete HTML)
      if (weekElement) {
        const calculatedDate = startDate.clone().add(i, 'weeks').format('DD/MM/YYYY');
        weekElement.textContent = calculatedDate;
      }
    }
  }
}

Breakdown of the Solution #

• Cloning Moment Objects: Moment.js objects are mutable, so using startDate.clone() ensures each increment calculation uses the original start date (instead of modifying it repeatedly, which would lead to incorrect dates).
• Dynamic Element Targeting: Template literals (dataM${i} and dataW${i}) let us loop through all your paragraph IDs without writing repetitive code for each date.
• Error Resilience: Checking if the weekly date element exists before updating it prevents console errors from any incomplete HTML tags.
• Seamless Integration: This code keeps your existing show/hide logic while adding the date calculation and population functionality you need.

Testing Steps #

1. Fix the incomplete <p> tag in your outputWeeks section.
2. Replace your existing submit() function with the code above.
3. Select a start date, choose either Months or Weeks, and click Submit—your paragraph elements will now populate with the correct calculated dates!

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