React DatePicker日历图标点击在Edge和IE11中失效求助

这个问题我之前也碰到过！根源在于CSS伪元素（::after）不是真实的DOM节点，在IE11和旧版Edge浏览器中，点击伪元素时，鼠标事件不会正确冒泡到下方的输入框（也就是react-datepicker的核心输入控件），而Chrome会自动处理这种事件穿透，所以才会出现浏览器兼容差异。

下面给你两个靠谱的解决方案，按优先级推荐：

方案1：给伪元素添加pointer-events: none（最简单） #

直接修改你的CSS，给伪元素加上pointer-events: none属性，这样点击伪元素时，事件会直接穿透到下面的输入框，触发日历打开逻辑：

.react-datepicker__input-container::after {
  background: url('./images.jpg') right 2px no-repeat;
  content: '';
  color: red;
  width: 18px;
  height: 21px;
  position: absolute;
  right: 0;
  top: 0;
  background-color: white;
  border-left: 1px solid black;
  pointer-events: none; /* 新增这一行 */
}

这个方案的优势是改动极小，不需要修改JS代码，适合快速解决问题。

方案2：使用customInput自定义带图标的输入框（更稳妥的兼容方案） #

如果方案1因为某些场景不适用（比如伪元素需要有交互效果），可以用react-datepicker提供的customInput属性，把图标做成真实的DOM元素，直接绑定点击事件：

第一步：创建自定义输入组件 #

const CustomDateInput = ({ value, onClick }) => (
  <div style={{ position: 'relative', display: 'inline-block' }}>
    {/* 基础输入框 */}
    <input
      type="text"
      value={value}
      onClick={onClick}
      style={{ paddingRight: '25px' }} // 给右侧图标留出空间
    />
    {/* 日历图标 */}
    <span 
      style={{
        position: 'absolute',
        right: 0,
        top: 0,
        width: '18px',
        height: '21px',
        background: 'url("./images.jpg") right 2px no-repeat',
        backgroundColor: 'white',
        borderLeft: '1px solid black',
        cursor: 'pointer'
      }}
      onClick={onClick} // 直接绑定打开日历的点击事件
    />
  </div>
);

第二步：在DatePicker中使用自定义输入框 #

修改你的DatePicker组件，添加customInput属性：

<DatePicker
  showMonthDropdown
  showYearDropdown
  dropdownMode="select"
  filterDate={this.isWeekDay}
  selected={date}
  onChange={val => this.setState({ date: val })}
  todayButton="Go to Today"
  onChangeRaw={event => this.setState({ date: event.target.value })}
  customInput={<CustomDateInput />} // 新增这一行
/>

这个方案通过真实DOM元素绑定事件，完全规避了伪元素的浏览器兼容问题，是长期维护的最优解。

额外提示 #

• 如果你用方案1，要确保伪元素的尺寸不会完全覆盖输入框的可点击区域（不过pointer-events: none已经解决了这个问题）。
• IE11对react-datepicker的支持需要注意：确保你使用的是兼容IE11的版本（比如v3.x及以下，新版本可能不再支持IE11），同时项目中已经配置了Babel等转译工具处理ES6+语法。

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