I am trying to trigger the <input type="date"> calendar to be shown on a double click event, like a user was clicking on the arrow in the right, but with no success, because I could not identify how the browser implements it. (Chrome 56.0.2924.87).

Anyone have an idea if it's possible, and if so how I can do this?

<input type="date">

I am trying to trigger the <input type="date"> calendar to be shown on a double click event, like a user was clicking on the arrow in the right, but with no success, because I could not identify how the browser implements it. (Chrome 56.0.2924.87).

Anyone have an idea if it's possible, and if so how I can do this?

<input type="date">

• javascript
• html
• eventtrigger
• html-input

• Did you try Jquery's prevent.default ? – oneNiceFriend Commented Mar 31, 2017 at 15:21
• In chrome you can access using input::-webkit-calendar-picker-indicator, I do not know if you can trigger click for that element $('input::-webkit-calendar-picker-indicator').click() Just in case take a look at this question stackoverflow./questions/14946091/… – Miguel Lattuada Commented Mar 31, 2017 at 15:32
• I've tried $('input::-webkit-calendar-picker-indicator').click() and $('#elementid::-webkit-calendar-picker-indicator').click() but it didn't worked. – Israel Commented Mar 31, 2017 at 15:49
• How should I use prevent.default in this case? I've not understood where to use it and how the calendar would be shown doing this. – Israel Commented Mar 31, 2017 at 15:51

1 Answer 1

I found a better way that works across browsers.

The only negative is you don't get to see the icon.

The idea is to set the date input as relative and then absolutely position the datepicker icon to span the entire input, and set its opacity to 0 so it's not visible.

This triggers the datepicker across browsers when you click the input.

Code:

/* date styles */
.datepicker {
  position: relative;
  cursor: pointer;
  box-sizing: border-box;
  line-height: normal !important;
}
.datepicker::-webkit-calendar-picker-indicator {
  position: absolute;
  right: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}