To click on image-icon, of input box of react-datepicker are not working

Question

here in Pseudocode I am using the image-icon my datePicker and it is opening with action. But when i am clicking on IMAGE-icon it's event doesn't persist.

Problem with layerIndex, image appears top of input box so, event could not occurs onChang of input.

import DatePicker from 'react-datepicker'


rendor(){
return(
  <div className='country-code small-text label-text'> Repair Date</div>
  <DatePicker
    id='date-picker'
    calendarClassName='fullWidth'
    maxDate={moment()}
    dateFormat='MM/DD/YYYY'
    className='fullWidth'
    onChange={this.handleDatePick}
    isOpen={this.state.isOpen}
    placeholderText='Enter date'/>)
}

score 1 · Answer 1 · answered Dec 31 '18 at 10:48

It is possible to make onClick on image icon as a function event.

All we need to pass the function in ref attribute into it.

import DatePicker from 'react-datepicker'

iconHandler = (c, name) => { window.isOpen = c }

rendor(){
return(
  <div className='country-code small-text label-text'> Repair Date</div>
  <DatePicker
    id='date-picker'
    calendarClassName='fullWidth'
    maxDate={moment()}
    dateFormat='MM/DD/YYYY'
    className='fullWidth'
    onChange={this.handleDatePick}
    isOpen={this.state.isOpen}
    ref={this.iconHandler}
    placeholderText='Enter date'/>)
}

To click on image-icon, of input box of react-datepicker are not working

1 Answers1