react-date-range组件需求：改为下拉式并移除顶部日期输入栏

1. 实现下拉式日期选择器 #

react-date-range本身没有内置下拉功能，我们可以通过React状态控制组件的显示/隐藏，配合自定义触发按钮和容器来实现：

import { useState } from 'react';
import { DateRange } from 'react-date-range';
import 'react-date-range/dist/styles.css';
import 'react-date-range/dist/theme/default.css';

const DropdownDateRange = () => {
  const [isOpen, setIsOpen] = useState(false);
  const [range, setRange] = useState([
    {
      startDate: new Date(),
      endDate: new Date(),
      key: 'selection'
    }
  ]);

  const handleSelect = (ranges) => {
    setRange([ranges.selection]);
    setIsOpen(false); // 选完日期自动关闭下拉
  };

  return (
    <div style={{ position: 'relative', width: '200px' }}>
      <button onClick={() => setIsOpen(!isOpen)} style={{ width: '100%', padding: '8px' }}>
        {range[0].startDate.toLocaleDateString()} - {range[0].endDate.toLocaleDateString()}
      </button>
      {isOpen && (
        <div style={{ position: 'absolute', top: '100%', left: 0, zIndex: 1000, border: '1px solid #e0e0e0', borderRadius: '4px', background: '#fff' }}>
          <DateRange
            onChange={handleSelect}
            showSelectionPreview={true}
            moveRangeOnFirstSelection={false}
            ranges={range}
          />
        </div>
      )}
    </div>
  );
};

export default DropdownDateRange;

核心思路：用isOpen状态控制日期选择器的显示，下拉容器用绝对定位放在触发按钮下方，设置z-index保证不会被其他元素遮挡，选择完成后自动关闭下拉。

2. 移除顶部日期输入框 #

有两种可靠的实现方式：

方式一：使用组件内置属性 #

DateRange组件提供了showDateDisplay属性，直接设为false就能隐藏顶部的日期输入区域：

<DateRange
  onChange={handleSelect}
  showSelectionPreview={true}
  moveRangeOnFirstSelection={false}
  ranges={range}
  showDateDisplay={false} // 隐藏顶部日期输入框
/>

方式二：CSS强制隐藏（备用方案） #

如果内置属性不生效，可以通过CSS选择器直接隐藏目标元素：

.rdrDateDisplay {
  display: none !important;
}

将这段样式添加到你的全局样式文件或者组件的内联样式中即可。

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