CODEWITHSUNDEEP
javascriptreactjsreact-hooks
nathan
nathan

Reputation: 369

How can I click on icon and react datepicker will open

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

Upvotes: 2

Views: 2705

Answers (1)

Anshuman Jaiswal
Anshuman Jaiswal

Reputation: 5462

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>

Upvotes: 3

Related Questions