antd的DatePicker的浮动问题

问题描述

问 题

我在一个浮动div中使用DatePicker,并且设置了getPopupContainer

    <div ref='root'>
    ......
    <Col span={24} style={{marginBottom:2}}> 
       <RangePicker
          getPopupContainer={()=>this.refs.root}
          defaultValue={[moment(this.state.data.startDate, 'YYYYMMDD'),
          moment(this.state.data.endDate, 'YYYYMMDD')]}
          disabledDate={this.disabledDate.bind(this)}
          ranges={[moment(this.state.data.startDate, 'YYYYMMDD'), 
          moment(this.state.data.endDate, 'YYYYMMDD')]}
          onChange={this.onChange.bind(this)}
        />
     </Col>
     <Col span={24} style={{marginBottom:2}}>数据类型：
        <Select style={{ width: 120 }} 
            onChange={this.onChangeState.bind(this, 'dataType')}
            defaultValue={this.state.data.dataType}
         getPopupContainer={()=>this.refs.root}>
             <Option value="ClimateStation">气象站点</Option>
             <Option value="HydrologyStation">水利站点</Option>
         </Select>

RangePicker的选项 浮动在底下 而Select的选项显示正常

不知道是bug 还是我哪里写错了？

解决方案

   <DatePicker style={{ width: 120 }} getPopupContainer={this.props.root} popupStyle={{zIndex:9999}}/>
   
   
   这样就显示在上面了！

这篇关于antd的DatePicker的浮动问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！