使用JavaScript根据开始日期和结束日期过滤数组

Question

我有一个包含开始和结束日期的数据数组，它在Angular日历中显示。我想根据开始和结束日期筛选数组。

0: {id: 86, start_date: "2019-11-06T09:00:13Z", end_date: "2019-11-11T14:00:13Z"}
1: {id: 86, start_date: "2019-11-04T18:30:00Z", end_date: "2019-11-07T07:12:09Z"}
2: {id: 86, start_date: "2019-11-04T18:30:00Z", end_date: "2019-11-07T07:03:21Z"}
3: {id: 86, start_date: "2019-11-26T18:30:00Z", end_date: "2019-11-27T07:03:21Z"}
4: {id: 66, start_date: "2019-11-04T18:30:00Z", end_date: "2019-11-07T07:12:09Z"}
5: {id: 66, start_date: "2019-11-05T18:30:00Z", end_date: "2019-11-12T07:03:21Z"}

如果我在2019-11-07这一天（我无法从这里获取日期进行筛选） 我想要根据以上条件构建一个数组，而不使用2019-11-07。

0: {id: 86, start_date: "2019-11-06T09:00:13Z", end_date: "2019-11-11T14:00:13Z"}
1: {id: 66, start_date: "2019-11-04T18:30:00Z", end_date: "2019-11-07T07:12:09Z"}

我已经编写了以下过滤器。

data.forEach((item, index) => {
if (index !== data['results'].findIndex(i => i.id === item.id && 
new Date(i.start_date).toDateString() === new Date(item.start_date).toDateString() && 
new Date(i.end_date).toDateString() === new Date(item.end_date).toDateString())) {
data.splice(index, 1);
}                   
});
console.log(data);

如果我在2019-11-07，我将无法删除此项。

0: {id: 86, start_date: "2019-11-06T09:00:13Z", end_date: "2019-11-11T14:00:13Z"}

有人能帮我吗？

- Jomol MJ

---

为什么要使用.forEach()、.findIndex()和.splice()，而不是一个简单的.filter()？ - Andreas

将字符串转换为日期，然后再将其转换回字符串以与另一个字符串进行比较至少是奇怪的... - Andreas

实际上，我不想建立一个数组。我只想从数组中删除不需要的项目。为了更好地理解，这里展示了预期的输出。 - Jomol MJ

请查看以下链接：https://dev59.com/QVYM5IYBdhLWcg3w5jRN - Sourav Golui

"我想从上面构建一个像这样的数组..." - Andreas

@SouravGolui 因为我正在使用Angular日历，并且在页面加载时我想要在日历上标记一些计数。所以我无法从那里得到特定的日期。因此，在这里过滤是一个问题。 - Jomol MJ

Answer 1

使用filter代替forEach:

const filterDate = {
  start_date: "2019-11-07T09:00:13Z",
  end_date: "2019-11-07T09:00:13Z",
};

const filteredItems = data.filter((item, index) => item.start_date >= filterDate.start_date && item.end_date <= filterDate.end_date);

我不确定您是否只想包含特定日期或所选时间间隔内的所有项目。此示例假设后者。

另外，您可能并不总是拥有filterDate对象，因此您需要添加特定逻辑来检查它。

- Massimiliano Sartoretto

---

我有一个日历来标记员工的请假。因此，从日历上我需要查看特定日期员工请假的数量。在页面加载时，我从API获取数据，并可以使用相同的开始日期和结束日期过滤数组。但是，有些人可能会连续几天请假，开始和结束日期将不同，但包括特定日期。我想在这里实现这种情况。你能帮我吗？ - Jomol MJ

@JomolMJ，在API中添加开始和结束日期查询支持，它将为您提供过滤后的数据，而不是给前端创建负担。在前端所做的只是使用API过滤数据更新状态。 - Zee

@MohdZeeshan，我想在页面加载时用休假人数标记日历。这是客户端的用户界面，我无法更改它。有什么可能实现吗？ - Jomol MJ

Answer 2

根据筛选日期选择，您需要做的是：

filterStartDate 时间应为 00:00:00，而 filterEndDate 时间应为 23:59:59...

其次，请使用以下代码...

let data = [
{id: 86, start_date: "2019-11-06T09:00:13Z", end_date: "2019-11-11T14:00:13Z"}
,{id: 86, start_date: "2019-11-04T18:30:00Z", end_date: "2019-11-07T07:12:09Z"}
,{id: 86, start_date: "2019-11-04T18:30:00Z", end_date: "2019-11-07T07:03:21Z"}
,{id: 86, start_date: "2019-11-26T18:30:00Z", end_date: "2019-11-27T07:03:21Z"}
,{id: 66, start_date: "2019-11-04T18:30:00Z", end_date: "2019-11-07T07:12:09Z"}
,{id: 66, start_date: "2019-11-05T18:30:00Z", end_date: "2019-11-12T07:03:21Z"}
]


const filterDate = {
  start_date: "2019-11-04T00:00:00Z",
  end_date: "2019-11-07T23:59:59Z",
};

const filteredItems = data.filter((item, index) => (new Date(item.start_date).getTime() >= new Date(filterDate.start_date).getTime() && new Date(item.end_date).getTime() <= new Date(filterDate.end_date).getTime()));

const personCount = filteredItems.length;

console.log(`Person count >>>>>>> ${personCount}`);

- Zee