Angular中根据起止日期提取周并按指定格式展示于下拉框

Got it, let's work through this problem step by step. You need to create dropdown options that display weekly date ranges in the format (week start mm/dd)mm/dd - mm/dd(week end mm/dd) between your specified start and end dates, and you're already using moment.js—perfect, we can leverage its date handling capabilities here.

Step 1: Convert Date Strings to Moment Objects #

First, let's take the date strings you've got and turn them back into moment objects so we can easily manipulate them:

// Grab and parse dates from localStorage
let dates = JSON.parse(localStorage.getItem('dates'));
let startDateStr = moment(dates[0].value).format('YYYY-MM-DD'); // "2018-05-01"
let endDateStr = moment(dates[1].value).format('YYYY-MM-DD'); // "2018-05-15"

// Convert to moment objects for date operations
const start = moment(startDateStr);
const end = moment(endDateStr);

Step 2: Build the Weekly Options Array #

Next, we'll loop through each week starting from your start date, calculate the start and end of each week, and format them into the required string:

const weekOptions = [];
let currentWeekStart = moment(start); // Start with your overall start date

while (currentWeekStart.isSameOrBefore(end)) {
    // Calculate the end of the current week (6 days after the start)
    let currentWeekEnd = moment(currentWeekStart).add(6, 'days');
    
    // If this week's end goes beyond your overall end date, use the overall end instead
    if (currentWeekEnd.isAfter(end)) {
        currentWeekEnd = moment(end);
    }

    // Format dates to mm/dd as required
    const formattedStart = currentWeekStart.format('MM/DD');
    const formattedEnd = currentWeekEnd.format('MM/DD');

    // Construct the display text in your desired format
    const optionText = `(${formattedStart})${formattedStart} - ${formattedEnd}(${formattedEnd})`;

    // Add to options array—include a value if you need it for your dropdown (like the week start date)
    weekOptions.push({
        text: optionText,
        value: currentWeekStart.format('YYYY-MM-DD')
    });

    // Move to the start of the next week
    currentWeekStart.add(7, 'days');
}

Step 3: Render Options to Your Dropdown #

Finally, let's populate these options into a dropdown. Here's how to do it with vanilla JavaScript:

const weekDropdown = document.getElementById('your-dropdown-id');
weekOptions.forEach(option => {
    const optElement = document.createElement('option');
    optElement.textContent = option.text;
    optElement.value = option.value;
    weekDropdown.appendChild(optElement);
});

Example Output #

For your sample dates (start: 2018-05-01, end: 2018-05-15), the dropdown options will look like this:

• (05/01)05/01 - 05/07(05/07)
• (05/08)05/08 - 05/14(05/14)
• (05/15)05/15 - 05/15(05/15)

Quick Note #

If you need to use natural weeks (e.g., Monday to Sunday) instead of starting from your initial date's weekday, just adjust the initial currentWeekStart to the start of the week. For example, to set Monday as the first day of the week:

// Set locale to use Monday as week start (optional, depending on your region)
moment.locale('zh-cn');
let currentWeekStart = moment(start).startOf('week');

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