React-datepicker自定义使用及日期过滤TypeError错误求助

错误原因分析 #

filterDateFrom.toLowerCase is not a function 错误的核心原因是：你在过滤逻辑中把Date对象当成了字符串处理，调用了只有字符串才有的toLowerCase()方法。filterDateFrom是通过React Datepicker的日期选择得到的Date实例，不是字符串类型，自然无法调用字符串方法。

正确实现步骤 #

1. 修正React Datepicker的双日期绑定 #

确保双日期选择的状态管理正确，使用数组存储开始/结束日期：

import { useState } from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';

function DateFilter() {
  // 初始化：默认选中当前日期作为开始，结束日期为null
  const [dateRange, setDateRange] = useState([new Date(), null]);
  const [filterDateFrom, filterDateTo] = dateRange;

  return (
    <DatePicker
      selected={filterDateFrom}
      onChange={(dates) => setDateRange(dates)}
      startDate={filterDateFrom}
      endDate={filterDateTo}
      selectsRange
      placeholderText="选择日期范围"
    />
  );
}

2. 正确实现日期过滤逻辑 #

过滤时需要先将JSON中的Period From和Period To字符串转换为Date对象，再与选择的日期范围进行比较：

// 假设你的原始数据是originalData数组
const filteredData = originalData.filter(item => {
  // 将JSON中的日期字符串转为Date对象
  const itemFrom = new Date(item["Period From"]);
  const itemTo = new Date(item["Period To"]);

  // 跳过格式无效的日期数据
  if (isNaN(itemFrom.getTime()) || isNaN(itemTo.getTime())) {
    return false;
  }

  // 过滤规则：数据的时间区间完全包含在选择的范围内
  // 如果只选了开始日期，筛选开始日期之后的数据
  const meetsStartCondition = filterDateFrom ? itemFrom >= filterDateFrom : true;
  // 如果只选了结束日期，筛选结束日期之前的数据
  const meetsEndCondition = filterDateTo ? itemTo <= filterDateTo : true;

  return meetsStartCondition && meetsEndCondition;
});

3. 特殊日期格式处理（可选） #

如果JSON中的日期格式是非常规格式（如DD/MM/YYYY），无法被new Date()直接解析，需要手动转换：

// 示例：将DD/MM/YYYY格式转为Date对象
function parseCustomDate(dateStr) {
  const [day, month, year] = dateStr.split('/');
  // 注意月份是0-based
  return new Date(year, month - 1, day);
}

// 在过滤逻辑中替换：
const itemFrom = parseCustomDate(item["Period From"]);
const itemTo = parseCustomDate(item["Period To"]);

关键注意事项 #

• 所有日期比较必须基于Date对象，禁止对Date实例调用字符串方法（如toLowerCase()、includes()等）
• 始终检查日期转换是否有效（通过isNaN(date.getTime())判断），避免无效日期导致的逻辑错误
• 根据业务需求调整过滤规则（比如改为“数据区间与选择区间有交集”，只需修改比较条件即可）

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