ReactJS年份范围输入实现求助：react-year-range-picker无法使用

如果react-year-range-picker组件无法正常工作，你可以尝试以下几种更可靠的实现方式：

方案一：自定义基础年份范围选择组件 #

这种方式灵活可控，适合不需要复杂UI的场景，核心是通过两个年份选择器（或输入框）实现范围选择，并加入简单的校验逻辑。

代码示例 #

import { useState } from 'react';

const YearRangePicker = () => {
  // 定义年份范围，可根据需求调整
  const startYear = 1990;
  const endYear = new Date().getFullYear();
  const years = Array.from({ length: endYear - startYear + 1 }, (_, i) => startYear + i);

  const [selectedRange, setSelectedRange] = useState({
    start: '',
    end: ''
  });

  const handleStartYearChange = (e) => {
    const start = e.target.value;
    setSelectedRange(prev => ({
      ...prev,
      start,
      // 如果结束年份小于新的起始年份，重置结束年份
      end: prev.end && prev.end < start ? '' : prev.end
    }));
  };

  const handleEndYearChange = (e) => {
    const end = e.target.value;
    setSelectedRange(prev => ({
      ...prev,
      end,
      // 如果起始年份大于新的结束年份，重置起始年份
      start: prev.start && prev.start > end ? '' : prev.start
    }));
  };

  return (
    <div style={{ display: 'flex', gap: '10px', alignItems: 'center' }}>
      <select
        value={selectedRange.start}
        onChange={handleStartYearChange}
        placeholder="起始年份"
      >
        <option value="">选择起始年份</option>
        {years.map(year => (
          <option key={year} value={year}>{year}</option>
        ))}
      </select>
      <span>-</span>
      <select
        value={selectedRange.end}
        onChange={handleEndYearChange}
        placeholder="结束年份"
      >
        <option value="">选择结束年份</option>
        {years.map(year => (
          <option key={year} value={year}>{year}</option>
        ))}
      </select>
      {selectedRange.start && selectedRange.end && (
        <p>已选择：{selectedRange.start}-{selectedRange.end}</p>
      )}
    </div>
  );
};

export default YearRangePicker;

核心逻辑 #

• 生成指定区间内的年份选项数组
• 同步校验起始/结束年份，确保结束年份不小于起始年份
• 实时展示选中的年份范围

方案二：基于成熟UI组件库改造 #

如果需要更美观的交互（比如弹窗选择、年份面板），可以用主流UI组件库的日期选择器改造，只保留年份选择功能。

示例：使用Ant Design的RangePicker（年份模式） #

Ant Design的RangePicker支持直接设置年份选择模式，无需额外封装：

import { DatePicker } from 'antd';
import { useState } from 'react';
import 'antd/dist/reset.css';

const { RangePicker } = DatePicker;

const AntdYearRangePicker = () => {
  const [yearRange, setYearRange] = useState([]);

  const handleChange = (dates) => {
    if (dates) {
      // 将日期对象转换为年份字符串
      const range = dates.map(date => date.format('YYYY'));
      setYearRange(range);
    } else {
      setYearRange([]);
    }
  };

  return (
    <div>
      <RangePicker
        picker="year"
        onChange={handleChange}
        style={{ width: 300 }}
        placeholder={['起始年份', '结束年份']}
      />
      {yearRange.length > 0 && (
        <p style={{ marginTop: 10 }}>已选择：{yearRange.join('-')}</p>
      )}
    </div>
  );
};

export default AntdYearRangePicker;

示例：使用react-datepicker实现年份范围选择 #

react-datepicker也支持通过配置实现年份选择，需要手动处理范围逻辑：

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

const ReactDatePickerYearRange = () => {
  const [startYear, setStartYear] = useState(null);
  const [endYear, setEndYear] = useState(null);

  const handleStartChange = (date) => {
    setStartYear(date);
    // 确保结束年份不早于起始年份
    if (endYear && endYear < date) {
      setEndYear(null);
    }
  };

  const handleEndChange = (date) => {
    if (startYear && date >= startYear) {
      setEndYear(date);
    }
  };

  return (
    <div style={{ display: 'flex', gap: '10px', alignItems: 'center' }}>
      <DatePicker
        selected={startYear}
        onChange={handleStartChange}
        showYearPicker
        dateFormat="yyyy"
        placeholderText="起始年份"
      />
      <span>-</span>
      <DatePicker
        selected={endYear}
        onChange={handleEndChange}
        showYearPicker
        dateFormat="yyyy"
        placeholderText="结束年份"
        minDate={startYear}
      />
      {startYear && endYear && (
        <p>已选择：{startYear.getFullYear()}-{endYear.getFullYear()}</p>
      )}
    </div>
  );
};

export default ReactDatePickerYearRange;

关于react-year-range-picker失效的常见原因 #

• 组件长期未维护，与当前React版本不兼容
• 依赖的第三方库版本冲突
• 缺少必要的样式导入导致UI异常

如果一定要用这个组件，可以尝试降级React版本到组件兼容的范围，或者检查是否遗漏了样式文件导入。

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