How To Open HTML Date Picker Dialog On Click Anywhere Inside Input?

Question

The default HTML input (code below) with type=date will display a date picker input.

However the date picker dialog only opens when you click on the calendar icon at the far right of the input.

If you click anywhere else in the input the dialog DOES NOT open.

How can you enable the input to open the date picker dialog when you click anywhere inside the input?

Note: I have already searched similar problems on Stack overflow for answers and on the internet but I did not get a proper solution.

<label for="session-date">Start date:</label>

<input type="date" id="session-date" name="session-date">

If you do not want people to close your question as a duplicate of these "similar problems", mention those similar problems in your question and indicate how they did not solve your situation. — Heretic Monkey, Apr 26 '21 at 17:06
@HereticMonkey I did indicate that question did not solve my problem in the last paragraph. Whoever decided to mark the question as duplicate read the title and felt it was a duplicate and also did not actually read till the end. — claOnline, Apr 27 '21 at 07:13

score 7 · Accepted Answer · answered Apr 26 '21 at 16:37

7

This should do it (without js!) when the field is clicked; when it is first focused it listens only for input, but you could workaround with js.

input#session-date {
    display: inline-block;
    position: relative;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    background: transparent;
    bottom: 0;
    color: transparent;
    cursor: pointer;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
}

Note: You'll lose the icon using this method, but you could definitely add one:

Here's the demo on codepen

answered Apr 26 '21 at 16:37

Todd

5,314
3
28
45

1

Does this also work in Firefox? – cloned Apr 26 '21 at 16:51
This is not working in Firefox – Serdar Nur Mar 04 '22 at 14:35

score 2 · Answer 2 · answered Apr 26 '21 at 16:45

This is my solution:

I don't know how to modify it's built in events in js but we can cheat it using css.

input#session-date{
  position:relative;
  overflow:hidden;
}
input#session-date::-webkit-calendar-picker-indicator{
  display:block;
  top:0;
  left:0;
  background: #0000;
  position:absolute;
  transform: scale(12)
}

<label for="session-date">Start date:</label>

<input type="date" id="session-date" name="session-date">

How To Open HTML Date Picker Dialog On Click Anywhere Inside Input?

2 Answers2

Linked