Open html5 datepicker on input click

Question

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

Does this answer your question? Method to show native datepicker in Chrome — Heretic Monkey
– Heretic Monkey, Commented Nov 3, 2021 at 14:05
Yes, it is the Page I had seen before. The answer I used is linked in the answer below. — sirtet
– sirtet, Commented Nov 4, 2021 at 22:49

sirtet · Accepted Answer · 2021-11-03 14:03:35Z

2

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

answered Nov 3, 2021 at 14:03

sirtet

951 gold badge2 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Zoran777 Over a year ago

Check this link out stackoverflow.com/a/70578150/2625761 which uses the onfocus event and the browser's showPicker method.

Muhammad Waqar Anwar · Accepted Answer · 2024-07-27 09:55:12Z

1

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() }
/>

answered Jul 27, 2024 at 9:55

Muhammad Waqar Anwar

4406 silver badges15 bronze badges

Collectives™ on Stack Overflow

Open html5 datepicker on input click

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related