如何解决如何使用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，然后每次选择的日期都会“携带”该时间。