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

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

Answer 1

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

Answer 2

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