如何在 Reactjs 中过滤从一个日期到另一个日期的数组

Question

我有一个对象数组“mainData”，如下所示：

0: {date: "2020-07-25T16:44:43.000Z"
description: "Qwerty"
id: 89329972},
1: {date: "2020-07-25T16:46:28.000Z"
description: "Place bins please"
id: 65586316},
2: {date: "2020-07-25T16:49:12.000Z"
description: "Solve sewerege problem"
id: 84687816},
3: {date: "2020-07-27T16:34:47.000Z"
description: "Test compl"
id: 56437370},
4: {date: "2020-07-28T08:40:34.000Z"
description: "Sewerage problem in my area"
id: 92402221},
5: {date: "2020-09-09T11:42:18.000Z"
description: "problem"
id: 25613902},

现在我允许用户使用 mui 日期选择器 select 从和到日期。这就是我接收值的方式：

fromDate: Sat Jul 25 2020 11:43:00
toDate: Sat Aug 08 2020 11:43:00

现在我想过滤从这个日期到那个日期的数组，包括开始日期和结束日期。我尝试这样做，但它只是 returns 一个空数组。我将代码放在 useEffect 中，每次 toDate 更改时运行，我还使用 Moment 使两个日期的格式相同：

 useEffect( () => {
        if (fromDate !== null && toDate !== null) {
            setReportData(
                mainData.filter(
                    (obj) =>{
                        

                        return Moment(obj.date).format("DD MMM yyyy") >= Moment(fromDate).format("DD MMM yyyy") && Moment(obj.date).format("DD MMM yyyy") <= Moment(toDate).format("DD MMM yyyy")
                    }


                )
            )

           

        }

    },[toDate])

编辑

当我select一个人约会时:

 useEffect( () => {
        if (oneDate !== null) {

            setReportData(
                mainData.filter(
                    (obj) =>{
                   

                        return new Date(obj.date.substring(0, 19)).getTime() === oneDate.getTime()
                    }


                )
            )

        }

    },[oneDate])

Answer 1

您对象的日期属性可以直接解析为 Date 对象。那么你可以使用getTime。另外，过滤 returns Date 对象。

因此，您可以将代码更改为这个

 useEffect( () => {
    if (fromDate !== null && toDate !== null) {
        setReportData(
            mainData.filter(
                (obj) =>{
                    return new Date(obj.date).getTime() >= fromDate.getTime() && new Date(obj.date).getTime() <= toDate.getTime()
                }
            )
        )
    }

},[toDate])

如果您想将所有日期视为本地时区日期，则需要删除每个日期字符串的最后部分，以便解析方法将每个字符串视为本地时区日期。

所以之前的方法变成了

 useEffect( () => {
    if (fromDate !== null && toDate !== null) {
        setReportData(
            mainData.filter(
                (obj) =>{
                    return new Date(obj.date.substring(0, 19)).getTime() >= fromDate.getTime() && new Date(obj.date.substring(0, 19)).getTime() <= toDate.getTime()
                }
            )
        )
    }

},[toDate])

Answer 2

我们也可以使用 moment.js。通过将时刻转换为预期格式。

在上面的例子中我们有 Sat Jul 25 2020 11:43:00

Moment使用llll提供locale支持格式，类似对于这个，用法如下。在 if 语句之后的顶部某处初始化格式常量；

const format = 'llll';

只需将过滤器 return 语句替换为 :

return Moment(obj.date, format).unix() >= Moment(fromDate, format).unix() && Moment(obj.date, format).unix() <= Moment(toDate, format).unix()

如何在 Reactjs 中过滤从一个日期到另一个日期的数组

How to filter array from one date to another in Reactjs

arrays

datepicker

filter

reactjs

编辑