CODEWITHSUNDEEP
htmlcssinputdatepicker
sirtet
sirtet

Reputation: 85

Open html5 datepicker on input click

By default, the datepicker opens when the icon is clicked.

Now, i want the datepicker to appear when the input field is clicked. I can achieve this by enlarging the icon to 100% width, but i can't make it transparent, so there would be no icon at all but only the text visible...

I think i have seen solutions fro this the other day, but now, i did not find anything at all.

How can i get the desired effect? PS: A onFocus solution would be even better than onClick.

input#modified::-webkit-calendar-picker-indicator {
  width: 100%;
  margin: 0;
  border: 1px solid red;
  background: none;
}
Normal: only icon-click shows datepicker 
<input type="datetime-local" ><br>
Modified: click red outline for datepicker
<input type="datetime-local" id="modified">

Upvotes: 0

Views: 11940

Answers (2)

Muhammad Waqar Anwar
Muhammad Waqar Anwar

Reputation: 440

Here's how i did it in React (Yes i did use showPicker() but it is used like e.currentTarget.showPicker()):

<input
    type="date"
    className="form-control"
    onClick={(e) => e.currentTarget.showPicker() }
/>

Upvotes: 1

sirtet
sirtet

Reputation: 85

This works for me. It is the answer that i had seen before but did not find.

Upvotes: 2

Related Questions