javascript - 模式内的日期选择器布局被破坏

Question

我使用 React 建立了一个网站。我在模态中有一个日期选择器。问题是当我点击日期时，日期选择器的布局被破坏了。有没有办法解决这个问题？

import DatePicker from 'react-datepicker'
import { Grid, Col, Row, Form, FormGroup, ControlLabel, FormControl, Button, Checkbox, Radio, Modal } from 'react-bootstrap'
import moment from 'moment'
import 'react-datepicker/dist/react-datepicker.css'
import 'react-datepicker/dist/react-datepicker-cssmodules.css'

export default class App extends Component {
  constructor() {
    super()
    this.state = {      
      processDateModal: moment(),
      expireDateModal:moment()
    }

  handleProcessDate = date => {
    this.setState({ processDateModal: date })
  }

  handleExpireDate = date => {
    this.setState({ expireDateModal: date })
  }

 render(){
   return(
   <Modal show={this.state.ShowMobile} onHide={this.handleCloseMobile}>
      <Modal.Body>
        <Row>
          <Col md={6}>
            <ControlLabel>Process date</ControlLabel>
            <DatePicker selected={this.state.processDateModal} isClearable={true}  timeFormat="HH:mm" showTimeSelect dateFormat="LLL"  onChange={this.handleProcessDate}/>
          </Col>
          <Col md={6}>
            <ControlLabel>Expire date</ControlLabel>
            <DatePicker selected={this.state.expireDateModal} isClearable={true}  timeFormat="HH:mm" showTimeSelect dateFormat="LLL"  onChange={this.handleExpireDate}/>
          </Col>
        </Row>
      </Modal.Body>
   </Modal>
 )

Answer 1

看起来 DatePicker 宽度由父 Col 控制。您可能必须在 DatePicker 上使用一些自定义 CSS 类来覆盖该宽度。