React DateRangePicker日期范围过滤缺失结束日期数据问题求助

业务代码中filterData无法返回正确结果：当选择开始日期为7月1日、结束日期为7月5日时，filterData中缺失7月5日的数据，仅返回1日至4日的结果。

状态声明 #

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

DateRangePicker组件代码 #

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

原始handleSelect处理函数 #

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

数据源示例 #

[
  {
    ID: 38372,
    actionType:"LOGIN",
    dateInMilliseconds:1720009655000,
    userFirstName:"Prakash",
    userId:100077,
    userLastName:"rajak",
    userLogin:"prakashRajak@gmail.com.com"
  }    
]

尝试过的解决方案（未彻底解决） #

const handleSelect = (date: any) => {
    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)
}

问题根源 #

DateRangePicker返回的endDate默认是选择日期的00:00:00时间戳，而数据源中的dateInMilliseconds是当天具体时刻（比如7月5日10:00:00），这个时间戳会大于endDate的00:00:00时间戳，导致7月5日的所有记录被过滤掉。

正确解决方案 #

将结束时间调整为选择日期的次日00:00:00，然后用小于这个时间戳作为过滤条件，这样就能包含结束当天所有时刻的记录：

const handleSelect = (date: any) => {
    const selectedStart = date.selection.startDate;
    const selectedEnd = date.selection.endDate;

    // 处理开始时间：固定为当天00:00:00，避免因选择的startDate带具体时间漏选
    const fromTimestamp = new Date(selectedStart.getFullYear(), selectedStart.getMonth(), selectedStart.getDate()).getTime();
    // 处理结束时间：设置为次日00:00:00
    const nextDay = new Date(selectedEnd);
    nextDay.setDate(nextDay.getDate() + 1);
    const toTimestamp = new Date(nextDay.getFullYear(), nextDay.getMonth(), nextDay.getDate()).getTime();

    const filterData = accountLogAllDetails?.filter(item => 
        item.dateInMilliseconds >= fromTimestamp && item.dateInMilliseconds < toTimestamp
    );

    setFilterList(filterData);
    setStartDate(selectedStart);
    setEndDate(selectedEnd);
}

补充说明 #

• 固定开始时间为当天00:00:00，避免因DateRangePicker返回的startDate包含具体时间（比如10:00:00），导致当天早于该时间的记录被漏选
• 使用< toTimestamp而非<=，因为次日00:00:00不属于结束当天的时间范围，能准确过滤到结束当天23:59:59的所有记录

内容的提问来源于stack exchange，提问作者Prakash Rajak