如何用JavaScript将跨多天的日历日期段拆分为每日实体

Alright, let's tackle this problem where you need to split multi-day calendar ranges into individual entries for each day in the period. Here's a straightforward, step-by-step solution:

Step 1: Date Handling Helper Functions #

First, we need two helper functions to work with your DD.MM.YYYY date format—one to convert the string to a JavaScript Date object (for date math) and another to convert it back to your desired string format:

// Convert DD.MM.YYYY string to a usable Date object
function parseDate(dateStr) {
  const [day, month, year] = dateStr.split('.').map(Number);
  // JS months are 0-indexed, so subtract 1 from the month value
  return new Date(year, month - 1, day);
}

// Convert a Date object back to DD.MM.YYYY string format
function formatDate(date) {
  const day = String(date.getDate()).padStart(2, '0');
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const year = date.getFullYear();
  return `${day}.${month}.${year}`;
}

Step 2: Process the Calendar Data #

Next, we'll use these helpers to expand each date range into daily entries. We'll leverage flatMap to handle nested arrays and collect all results into a single array:

const calendar = [{ 
  "Title": "Go Shopping", 
  "dates": [ 
    { "DateBeginn": "19.02.2021", "DateEnd": "22.02.2021", "Where": "Supermarket" }, 
    { "DateBeginn": "23.02.2021", "DateEnd": "23.02.2021", "Where": "Biomarket" }
  ] 
}];

const expandedCalendarData = calendar.flatMap(mainEntry => {
  // Iterate over each date range in the main entry
  return mainEntry.dates.flatMap(dateEntry => {
    const startDate = parseDate(dateEntry.DateBeginn);
    const endDate = parseDate(dateEntry.DateEnd);
    const dailyEntries = [];

    // Loop through each day from start to end (inclusive)
    let currentDay = new Date(startDate);
    while (currentDay <= endDate) {
      dailyEntries.push({
        Title: mainEntry.Title,
        DateBeginn: formatDate(currentDay),
        DateEnd: dateEntry.DateEnd, // Keep original end date
        Where: dateEntry.Where
      });
      // Move to the next day
      currentDay.setDate(currentDay.getDate() + 1);
    }

    return dailyEntries;
  });
});

// Check the result
console.log(expandedCalendarData);

Step 3: Verify the Output #

Running this code will produce exactly the output you're expecting:

[
  { "Title": "Go Shopping", "DateBeginn": "19.02.2021", "DateEnd": "22.02.2021", "Where": "Supermarket" },
  { "Title": "Go Shopping", "DateBeginn": "20.02.2021", "DateEnd": "22.02.2021", "Where": "Supermarket" },
  { "Title": "Go Shopping", "DateBeginn": "21.02.2021", "DateEnd": "22.02.2021", "Where": "Supermarket" },
  { "Title": "Go Shopping", "DateBeginn": "22.02.2021", "DateEnd": "22.02.2021", "Where": "Supermarket" },
  { "Title": "Go Shopping", "DateBeginn": "23.02.2021", "DateEnd": "23.02.2021", "Where": "Biomarket" }
]

How It Works #

• Date Conversion: The helper functions bridge the gap between your string format and JavaScript's native date handling, making it easy to iterate through days.
• Flat Mapping: flatMap simplifies working with nested arrays—we iterate through main calendar entries and their date ranges, then flatten the resulting daily entries into one array.
• Daily Iteration: For each date range, we loop from the start to end date, creating a new entry for each day. The DateEnd and other metadata stay consistent with the original range, while DateBeginn updates to the current day.

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