1

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">
TylerH
  • 20,799
  • 66
  • 75
  • 101
Israel
  • 21
  • 1
  • 2
  • Did you try Jquery's prevent.default ? – oneNiceFriend Mar 31 '17 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 http://stackoverflow.com/questions/14946091/are-there-any-style-options-for-the-html5-date-picker – Miguel Lattuada Mar 31 '17 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 Mar 31 '17 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 Mar 31 '17 at 15:51

1 Answers1

4

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;
}
Segebee
  • 69
  • 6
  • 2
    I don't follow the first part. What helpful answer are you referring to exactly? Yours is the only answer to this question that I can see. – cigien Jun 08 '21 at 23:34
  • @cigien thanks... actually went through lots of stackoverflow threads... i have edited the answer to avoid ambiguity – Segebee Jun 09 '21 at 00:13