How can I click on icon and react datepicker will open

user_15519806 0
Viewed 472

I am trying to add an SVG icon into react-datepicker input but seems like I can't add it with css input so I created a new element for icon and trying to create a function when click into icon the react-datepicker will open.

Here is my following code:

  <DatePicker
    selected={dateInput}
    onChange={(date) => setDateInput(date)}
    minDate={moment().toDate()}
    showPopperArrow={false}
  />
  <span>
    <CalendarIcon />
  </span>

Here is my project look like:

enter image description here

react-hooks reactjs javascript
1 Answers

Can you try wrapping <DatePicker> & icon within the label?

Code will look like:

<label>
  <DatePicker
    selected={dateInput}
    onChange={(date) => setDateInput(date)}
    minDate={moment().toDate()}
    showPopperArrow={false}/>
  <CalendarIcon />
</label>
user_2649460
Related