在 DateRangePicker 中单击结束日期后未出现结束日期结果

Question

在下面的代码中，filterData没有给我一个正确的结果，就像我选择开始日期为7月1日和结束日期为7月5日一样，在结果中，即在filterData中，7月5日数据丢失，它唯一给出的结果从第一到第四。

这是对应的状态声明

const [startDate, setStartDate] = React.useState(new Date());
const [endDate, setEndDate] = React.useState(new Date());
const [filterList, setFilterList] = React.useState([]);

这是我在 React js 中的 DateRangePicker

<DateRangePicker
 ranges={[selectionRange]}
 onChange={handleSelect}
 locale={enGB}
/>

这是

handleSelect

 的 

DateRangePicker

函数

    const handleSelect = (date: any) => {
        const fromdate = date.selection.startDate.getTime()
        const toDate = date.selection.endDate.getTime()
    
        const filterData = accountLogAllDetails?.filter((itemDate: any) => (
        itemDate.dateInMilliseconds >= fromdate && itemDate.dateInMilliseconds <= toDate))
        setFilterList(filterData)
        setEndDate(date.selection.endDate)
        setStartDate(date.selection.startDate)
    }

在 accountLogAllDetails 中我的回复是

[
  ID: 38372
  actionType:"LOGIN"
  dateInMilliseconds:1720009655000
  userFirstName:"Prakash"
  userId:100077
  userLastName:"rajak"
  userLogin:"[email protected]"
]    

如果您在这种情况下提供任何帮助，我将非常感激。

尝试过这个解决方案，但它不起作用 const handleSelect = (日期: 任意) => {

    setStartDate(date.selection.startDate)
    setEndDate(date.selection.endDate)

    const fromdate = date.selection.startDate.getTime()
    const toDate = date.selection.endDate.getTime()


    const startDate1 = new Date(date.selection.endDate);
    const day = 60 * 60 * 24 * 1000;
    const endDate1 = date.selection.endDate.getTime() + day;


    const sday = date.selection.startDate.getTime()
    const eday = new Date(date.selection.endDate)
    const newDay = eday.setDate(eday.getDate() + 1);

    const filterData = accountsLog?.filter((itemDate: any) => {
        // (fromdate < itemDate.dateInMilliseconds) && (itemDate.dateInMilliseconds <= toDate) //end date is making issue
        // (itemDate.dateInMilliseconds >= fromdate) && (itemDate.dateInMilliseconds <= endDate1) //working fine but only today and yesterday is causing issue
        // const item = new Date(itemDate.dateInMilliseconds)
        return itemDate.dateInMilliseconds >= sday && itemDate.dateInMilliseconds <= newDay //only yesterday is causing issue

    })
    setFilterList(filterData)

}
我已经尝试了上述 3 个解决方案，但没有一个能正常工作，它们导致了问题

Answer 1

问题是，如果时间设置为午夜 (00:00:00)，您的过滤器逻辑不包含结束日期的数据。发生这种情况是因为日期还包括小时、分钟和秒。如果结束日期是午夜，您的过滤器将不会捕获当天晚些时候的任何条目（例如 7 月 5 日上午 10:00）。

为了确保包含结束日期的所有数据，一种简单的方法是将 toDate 的时间设置为一天结束时 (23:59:59.999) 来调整 toDate。具体方法如下：

const handleSelect = (date: any) => {
    const fromdate = date.selection.startDate.getTime();
    
    // Set end date to the end of the day
    const toDate = new Date(date.selection.endDate);
    toDate.setHours(23, 59, 59, 999); // Set time to 23:59:59.999
    const endTime = toDate.getTime();

    const filterData = accountLogAllDetails?.filter((itemDate: any) => (
        itemDate.dateInMilliseconds >= fromdate && itemDate.dateInMilliseconds <= endTime
    ));

    setFilterList(filterData);
    setEndDate(date.selection.endDate);
    setStartDate(date.selection.startDate);
};

• 通过将结束日期的时间设置为 23:59:59.999，您可以确保过滤器包含结束日期以来的所有记录，无论一天中的哪个时间。
• 过滤器现在可以正确包含从开始日期到结束日期当天结束的所有条目。

如果您需要处理其他边缘情况（例如，不同的时区），您可能需要进一步完善日期处理，但对于大多数情况，此解决方案应该可以完美工作。