javascript - Is there a way to trigger a date input's calendar on double click? - Stack Overflow

admin管理员组

文章数量:1419226

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

Share Improve this question Follow edited Apr 18, 2022 at 15:39 TylerH 21.1k7979 gold badges7979 silver badges114114 bronze badges asked Mar 31, 2017 at 15:17 IsraelIsrael 2111 silver badge22 bronze badges 4

• 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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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;
}

本文标签： javascriptIs there a way to trigger a date input39s calendar on double clickStack Overflow