javascript - 如何使用 React Js 过滤小于关键搜索日期的对象日期

Question

我目前是 React js 的新手，现在我有一个模块，我想在其中显示所有小于我的关键搜索日期的日期。假设我的关键搜索日期是“2021-02-17”，所以从 2 月 17 日到最后一个之前的数据将是输出。如何通过 react js 实现它？

这是我的回应：

{id: 1, receive_date: "Feb 12, 2021", remarks: "11"}
{id: 2, receive_date: "Feb 12, 2021", remarks: "14"}
{id: 3, receive_date: "Feb 14, 2021", remarks: "11"}
{id: 4, receive_date: "Feb 17, 2021", remarks: "15"}
{id: 5, receive_date: "Feb 18, 2021", remarks: "18"}

FilterReceiveChk 函数：

let keyStatus = this.state.dateReceive.toLowerCase();

            let filterReceiveChk = dataTable

            filterReceiveChk = filterReceiveChk.filter((item) => {
         
            let objIndex = filterReceiveChk.findIndex((obj => obj.id === item.id));

            let receive = new Date(item.receive_date);
            let year = receive.getFullYear();
            let month = receive.getMonth();
            let dt = receive.getDate();

            let deposit = new Date(item.deposit_date);
            let yearDepo = deposit.getFullYear();
            let monthDepo = deposit.getMonth();
            let dtDepo = deposit.getDate();

            let dateChck = new Date(item.checkDate);
            let yearChck = dateChck.getFullYear();
            let monthChck = dateChck.getMonth();
            let dtChck = dateChck.getDate();

            let monthsArr = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
            if (dt < 10) {
                dt = '0' + dt;
            }

            if (dtChck < 10) {
                dtChck = '0' + dtChck;
            }

            if (dtDepo < 10) {
                dtDepo = '0' + dt;
            }


            let receiveDate = monthsArr[month] + ' ' + dt + ', ' + year;
            

            filterReceiveChk[objIndex].receive_date = receiveDate


            let receive_date = [item.receive_date]

            return Object.keys(receive_date).some(
                (key) =>
                    typeof receive_date[key] === "string"  &&
                    receive_date[key].toLowerCase().includes(keyStatus)
            );
        });

这是我的地图功能：

filterReceiveChk.map((check, index) => {
     console.log(check)          
})

谢谢你。

标签： javascriptreactjs

Answer 1

这不是一个真正的 React 问题，因为它只是直接需要的 JavaScript。

使用日期时间戳是一个简单的数学问题。

因此，使用.filter()我们只需选择receive_date<= 输入日期的时间戳的 s 个时间戳

const data = [{id: 1, receive_date: "Feb 12, 2021", remarks: "11"},
{id: 2, receive_date: "Feb 12, 2021", remarks: "14"},
{id: 3, receive_date: "Feb 14, 2021", remarks: "11"},
{id: 4, receive_date: "Feb 17, 2021", remarks: "15"},
{id: 5, receive_date: "Feb 18, 2021", remarks: "18"}];

const input = 'Feb 17, 2021';
const inputTS = new Date(input).getTime();
const result = data.filter(d=>Date.parse(d.receive_date) <= inputTS);

console.log(result);