如何使用mui datepicker

问题描述

我有一个对象数组“ 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-26T16:34:47.000Z"
description: "Test compl"
id: 56437370},4: {date: "2020-07-26T16:34:47.000Z"
description: "Test compl"
id: 56437370},5: {date: "2020-07-26T16:34:47.000Z"
description: "Test compl"
id: 56437370},6: {date: "2020-07-27T08:40:34.000Z"
description: "Sewerage problem in my area"
id: 92402221},7: {date: "2020-07-28T11:42:18.000Z"
description: "problem"
id: 25613902},8: {date: "2020-08-09T11:42:18.000Z"
description: "problem"
id: 25613902},9: {date: "2020-08-10T11:42:18.000Z"
description: "problem"
id: 25613902},

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

db date new : Sat Jul 25 2020 16:44:43
selected fromDate : Sat Jul 25 2020 22:46:00
selected toDate : Mon Aug 10 2020 22:46:15

第一个数据库日期是25日，而fromdate也是25日，但是它们的值由于时区/时区的不同而有所不同。

这是我用来过滤值的内容：

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

                        console.log("db date new :",new Date(obj.date.substring(0,19)))
                        console.log("selected fromDate :",fromDate)
                        console.log("selected toDate :",toDate)

                        
                        return new Date(obj.date.substring(0,19)).getTime() >= fromDate.getTime() && new Date(obj.date.substring(0,19)).getTime() <= toDate.getTime()

                     
                    }
                )
            )

          

        }

    },[toDate])

使用此方法，我没有获得日期为25的对象，但确实获得了与toDate匹配的对象以及这两个日期之间的所有对象。

解决方法

由于您只想按日期过滤而忽略时间，因此可以执行以下操作：

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

                 
                }
            )
        )
    }

},[toDate])

因此，您要告诉程序的是获取fromDate和toDate对象并更改它们的时间，以便在一天的开始和结束时。 如果将代码更改为此，则过滤器将起作用。我无法在MUI DatePicker中找到属性以忽略时间。

new Date(fromDate.getFullYear(),0)
new Date(toDate.getFullYear(),0)

另一种选择是使用一个包含时间的日期初始化DatePickers的值，例如2020-07-25T00:00:01，然后每次选择的日期都会“携带”该时间。