求助：JS实现过期日期红色高亮及HTML多日期样式调整

Hey there, let's get those date styles sorted out based on your requirements. First, let's recap what you need to achieve:

• All expired dates (including END MAR 20) should show up in red.
• Only END APR 29 should be green.
• Any dates earlier than END MAR 20 also need to be red.

Since you already have the date parsing and sorting logic started, here's how to extend it to apply the correct styling:

Step 1: Add CSS Classes for Color Styles #

First, let's define reusable CSS classes to keep your code clean—no inline styles needed:

.expired-date {
    color: #ff0000; /* Bright red for expired dates */
}
.valid-date {
    color: #008000; /* Green for the single valid date */
}

Step 2: Update Your JavaScript to Apply Styles #

I'll complete your existing code snippet and add the styling logic. I'll include both exact string matching (for your 4 specific dates) and date value checking (in case you have dynamic dates later):

Option 1: Exact String Matching (Perfect for Your 4 Fixed Dates) #

This is the simplest approach if you only have those 4 dates to handle:

// Get all date elements from the grid
const dateElements = $(".grid-item");

// Loop through each date element to apply styles
dateElements.each(function() {
    const dateText = $(this).text().trim();
    
    // Apply styles based on your exact rules
    if (dateText === "END APR 29") {
        // Only this date gets green
        $(this).removeClass("expired-date").addClass("valid-date");
    } else {
        // All others (including END MAR 20 and earlier dates) get red
        $(this).removeClass("valid-date").addClass("expired-date");
    }
});

Option 2: Date Value Checking (For Dynamic/Additional Dates) #

If you might have more dates later, use this to compare actual date values instead of just strings:

// Get all date elements and their text content
const dateElements = $(".grid-item");

// Helper function to parse your "END MON DD" date format
const parseEndDate = (dateStr) => {
    if (!dateStr.startsWith("END")) return null;
    
    const [_, monthAbbr, day] = dateStr.split(" ");
    const monthMap = {
        "JAN": 0, "FEB": 1, "MAR": 2, "APR": 3, "MAY": 4, "JUN": 5,
        "JUL": 6, "AUG": 7, "SEP": 8, "OCT": 9, "NOV": 10, "DEC": 11
    };
    
    // Adjust the year here if your dates aren't in the current year
    return new Date(new Date().getFullYear(), monthMap[monthAbbr], parseInt(day));
};

// Define your target dates as Date objects
const mar20Date = parseEndDate("END MAR 20");
const apr29Date = parseEndDate("END APR 29");

// Loop through each element to apply styles
dateElements.each(function() {
    const dateText = $(this).text().trim();
    const currentDate = parseEndDate(dateText);
    
    if (!currentDate) {
        // Handle invalid date formats (default to red)
        $(this).addClass("expired-date");
        return;
    }
    
    if (currentDate.getTime() === apr29Date.getTime()) {
        // Only END APR 29 gets green
        $(this).removeClass("expired-date").addClass("valid-date");
    } else {
        // All other dates (including END MAR 20 and earlier) get red
        $(this).removeClass("valid-date").addClass("expired-date");
    }
});

Quick Notes: #

• If your dates load dynamically (e.g., after an API call), wrap this code in a function and call it once the dates are rendered on the page.
• Using removeClass before adding the target class ensures no style conflicts if elements are reprocessed (like on page refresh).
• Adjust the year in parseEndDate if your dates aren't using the current year.

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