CODEWITHSUNDEEP
javascripthtmleventtriggerhtml-input
Israel
Israel

Reputation: 21

Is there a way to trigger a date input's calendar on double click?

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

Upvotes: 1

Views: 4210

Answers (1)

Segebee
Segebee

Reputation: 89

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

Upvotes: 6

Related Questions