CODEWITHSUNDEEP
reactjsdatefilterdatepicker
Aldor
Aldor

Reputation: 292

How to filter dates from and to a particular date in Reactjs using mui datepicker

I have an array of objects "mainData" like so:

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},

Now I am allowing the user to select from and to dates by using the mui datepicker. This is how I am receiving the values:

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

The first db date is 25th where as the fromdate is also 25th but their values are coming different because of the difference in time/timezone.

This is what I used to filter out the values:


 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])

With this I don't get the objects with the date 25th but I do get the objects that matches the toDate and all the objects between those two dates.

Upvotes: 0

Views: 1533

Answers (1)

Apostolos
Apostolos

Reputation: 10463

Since you want to filter by date only and ignore time, you can do the following:

 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, 0, 0).getTime() 
                    && new Date(obj.date.substring(0, 19)).getTime() <= new Date(toDate.getFullYear(), toDate.getMonth(), toDate.getDate(), 23, 59, 0).getTime()

                 
                }
            )
        )
    }

}, [toDate])

So what you are telling your program is to take the fromDate and toDate objects and change their times in order to be at start and end of the day. If you change your code to this, your filters will work. I couldn't find a property in MUI DatePicker in order to ignore the time.

new Date(fromDate.getFullYear(), fromDate.getMonth(), fromDate.getDate(), 0, 0, 0)
new Date(toDate.getFullYear(), toDate.getMonth(), toDate.getDate(), 23, 59, 0)

The other alternative is to initialize the DatePickers' values with a date that includes time eg 2020-07-25T00:00:01 and then every date selected will "carry" this time.

Upvotes: 1

Related Questions