如何使用过滤器根据我使用 React Js 在日期选择器上选择的日期返回所有值答案

【问题标题】：How to use the filter to return all the values based on what date I choose on my datepicker using React Js如何使用过滤器根据我使用 React Js 在日期选择器上选择的日期返回所有值
【发布时间】：2021-03-19 23:54:25
【问题描述】：

开发人员您好，我在根据当前使用 react js 的日期选择器上使用的日期过滤数据时遇到问题。如果输入日期小于我搜索的日期，则过滤效果很好。为了很好理解，我将制作一个 sn-p 示例代码。

如果您在控制台上运行此代码，我得到的唯一值是 2021-02-12，但是我的过滤器条件小于我的输入。所以可能预期的输出是 2021-02-12 和 2021-03-21。

那么大问题：为什么不满足这个条件？

<!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>

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

使用与在两个区域中创建时间戳相同的方法：将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);

或

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

但由于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);

【讨论】：

嗨，为什么我使用 data.filter(d=> Date.parse(d.receive_date)