关于Atlaskit DatePicker/DateTimePicker被容器Div遮挡的问题求助

我之前也碰到过Atlaskit DatePicker被容器div遮挡的情况，结合你使用的版本（atlaskit/datetime-picker@10.0.1 + React 16.13.0），给你几个针对性的解决思路：

1. 排查父容器的overflow属性 #

这是最常见的原因——很多时候父容器设置了overflow: hidden或overflow: auto，导致DatePicker的下拉面板被容器裁剪。你需要逐层检查DatePicker所在的所有父级div，把限制overflow的容器属性改成overflow: visible，或者调整布局让下拉面板脱离这个受限容器。

示例调整：

// 原来的受限容器
<div style={{ overflow: 'hidden', height: '300px' }}>
  <DatePicker 
    label={label} 
    isRequired={Data1.required} 
    onChange={(e) => this.onChangeField(e, key, type, 'Date')} 
    defaultValue={defValue} 
    isDisabled={!this.props.isEditIssuePermission} 
    dateFormat="DD/MM/YYYY" 
    placeholder="Select Date" 
  />
</div>

// 修改后
<div style={{ overflow: 'visible', height: '300px' }}>
  <DatePicker {...你的原有属性} />
</div>

2. 提升下拉面板的z-index层级 #

如果遮挡是因为其他元素的z-index比DatePicker面板更高，你可以通过自定义样式强制提升面板层级：

首先给DatePicker添加自定义类名：

<DatePicker 
  className="custom-date-picker"
  {...你的原有属性}
/>

然后在CSS中设置：

.custom-date-picker .ak-date-picker__popper {
  z-index: 9999 !important; /* 根据你的页面实际层级调整数值 */
}

3. 配置Popper的挂载策略 #

Atlaskit的DatePicker基于Popper.js实现下拉定位，你可以通过popperProps将下拉面板挂载到body元素下，彻底脱离父容器的样式限制：

<DatePicker
  {...你的原有属性}
  popperProps={{
    placement: 'bottom-start',
    strategy: 'fixed', // 也可以尝试'absolute'，根据你的布局选择
    modifiers: [
      {
        name: 'preventOverflow',
        options: {
          boundary: 'viewport', // 让面板以视口为边界，而非父容器
        },
      },
    ],
  }}
/>

注：这个配置适配你使用的10.0.1版本，不同版本的Popper配置可能略有差异，你可以根据实际效果微调。

4. 检查父容器的position属性 #

如果父容器设置了position: relative，可能会让Popper的定位基于该容器，进而导致面板被裁剪。你可以尝试将父容器的position改为static，或者调整Popper的参考元素配置。

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