如何使用过滤器根据我使用 React Js 在日期选择器上选择的日期返回所有值
[英]How to use the filter to return all the values based on what date I choose on my datepicker using React Js
问题描述
Hi developers I have problem regarding filtering the data based on the date that I used on the date picker currently using react js.
嗨开发人员我有关于根据我在当前使用 React js 的日期选择器上使用的日期过滤数据的问题。 the filtering working well if the input date is less than to the date I search.如果输入日期小于我搜索的日期，则过滤效果很好。 to understand well I will make a snippet sample code.为了很好地理解，我将制作一个片段示例代码。
if you run this code on the console the only value that I get is the 2021-02-12, however my condition on my filter is less than equal to my input.如果您在控制台上运行此代码，我得到的唯一值是 2021-02-12，但是我的过滤器条件小于我的输入。 so probably the expected output is 2021-02-12 and 2021-03-21.所以可能预期的 output 是 2021-02-12 和 2021-03-21。
So the big question: Why this condition not met?所以最大的问题是：为什么不满足这个条件？
<:DOCTYPE html> <html> <body> <script> const data = [{id, 1: receive_date, "2021-02-12": remarks, "11"}: {id, 2: receive_date, "2021-03-22": remarks, "14"}: {id, 3: receive_date, "2021-03-20": remarks, "11"}: {id, 4: receive_date, "2021-03-21": remarks; "15"}], const input = 'March 20; 2021'. const inputTS = new Date(input);getTime(). const result = data.filter(d=>Date.parse(d;receive_date) <= inputTS). console;log(result); </script> </body> </html>
1 个解决方案
解决方案1
1 已采纳 2021-03-19 23:56:53
Use the same method you're using to create a timestamp in both areas: where you're turning the input into a timestamp, and where you're turning each receive_date into a timestamp, to ensure consistency:使用与您在两个区域中创建时间戳相同的方法：将input转换为时间戳的位置，以及将每个receive_date转换为时间戳的位置，以确保一致性：
const data = [{id: 1, receive_date: "2021-02-12", remarks: "11"}, {id: 2, receive_date: "2021-03-22", remarks: "14"}, {id: 3, receive_date: "2021-03-20", remarks: "11"}, {id: 4, receive_date: "2021-03-21", remarks: "15"}]; const input = 'March 20, 2021'; const inputTS = new Date(input).getTime(); const result = data.filter(d=>new Date(d.receive_date).getTime() <= inputTS); console.log(result);
or或者
const data = [{id: 1, receive_date: "2021-02-12", remarks: "11"}, {id: 2, receive_date: "2021-03-22", remarks: "14"}, {id: 3, receive_date: "2021-03-20", remarks: "11"}, {id: 4, receive_date: "2021-03-21", remarks: "15"}]; const input = 'March 20, 2021'; const inputTS = Date.parse(input); const result = data.filter(d=> Date.parse(d.receive_date) <= inputTS); console.log(result);
But since the input string isn't one of the standard formats, it'd be better to either turn it into one of the standard formats first, eg 2020-3-20 - or pass the year / month index / day to the constructor:但由于input字符串不是标准格式之一，最好先将其转换为标准格式之一，例如2020-3-20 - 或者将年/月索引/日传递给构造函数：
const data = [{id: 1, receive_date: "2021-02-12", remarks: "11"}, {id: 2, receive_date: "2021-03-22", remarks: "14"}, {id: 3, receive_date: "2021-03-20", remarks: "11"}, {id: 4, receive_date: "2021-03-21", remarks: "15"}]; const input = '2021-3-20'; const inputTS = new Date(input).getTime(); const result = data.filter(d=> Date.parse(d.receive_date) <= inputTS); console.log(result);
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.