如何使用JavaScript从数据文件中筛选出正确的日期？

Hey there! No worries about your English at all—we’ve all been beginners, and asking questions is half the battle of learning. Let’s break down how to work with those ISO 8601 dates in your Data.js file and filter them exactly how you need.

First, Understand the Date Format #

Your date string "2018-04-14T08:30:00+02:00" is an ISO 8601 formatted date with a timezone offset. The best part? JavaScript’s built-in Date object can parse this directly—no fancy libraries required (though you might want to explore tools like date-fns later for more complex tasks, let’s keep it simple for now).

Step 1: Confirm Your Data Structure #

You mentioned using var elements = {} to reference your data. Let’s assume elements contains an array of items (since filtering makes the most sense for a collection of data). For example, it might look like this:

// Example structure of your elements object
var elements = {
  projectItems: [
    { from: "2018-04-14T08:30:00+02:00", name: "Task A" },
    { from: "2018-05-20T10:15:00+02:00", name: "Task B" },
    { from: "2018-03-05T14:45:00+01:00", name: "Task C" }
  ]
};

Step 2: Filter the Dates with Array.filter() #

Use JavaScript’s Array.filter() method to pick out items that match your date criteria. Here are common scenarios you might need:

Scenario 1: Filter Dates After a Specific Cutoff

Suppose you want all items where the from date is later than April 15, 2018:

// Define your cutoff date (ISO format works perfectly here)
const cutoffDate = new Date("2018-04-15");

// Filter the items
const filteredItems = elements.projectItems.filter(item => {
  // Convert the string date to a usable Date object
  const itemDate = new Date(item.from);
  // Return true only if the item's date is after the cutoff
  return itemDate > cutoffDate;
});

// Now filteredItems holds only the items with dates after 2018-04-15
console.log(filteredItems);

Scenario 2: Filter Dates on a Specific Day

If you want all items that fall exactly on April 14, 2018, you need to check if the date falls within the start and end of that day. Using UTC time avoids timezone confusion:

const targetDay = new Date("2018-04-14");
// Set the start of the target day (UTC)
const startOfDay = new Date(targetDay.setUTCHours(0, 0, 0, 0));
// Set the end of the target day (UTC)
const endOfDay = new Date(targetDay.setUTCHours(23, 59, 59, 999));

const filteredItems = elements.projectItems.filter(item => {
  const itemDate = new Date(item.from);
  // Check if the item's date is between the start and end of the target day
  return itemDate >= startOfDay && itemDate <= endOfDay;
});

Quick Tips to Avoid Headaches #

• Check for invalid dates: If any from field is missing or malformed, new Date() will return Invalid Date. Add a quick check to skip these:

  const filteredItems = elements.projectItems.filter(item => {
    const itemDate = new Date(item.from);
    // Skip items with invalid dates
    if (isNaN(itemDate.getTime())) return false;
    return itemDate > cutoffDate;
  });
  

• Timezone adjustments: The original date has a +02:00 offset, so new Date() parses it to the correct UTC time. If you need to work with your local timezone, use setHours() instead of setUTCHours() when defining start/end times.

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