2

I built a website using React. I have a datepicker inside a modal. The problem is when I clicked on the date, the layout of the datepicker was broken. Is there a way to solve this?

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>
 )

enter image description here

1 Answers1

0

It looks like the DatePicker width is being controlled by the parent Col. You might have to use some custom CSS classes on the DatePicker to override that width.

Nate-Bit Int
  • 165
  • 9