Open HTML5 date picker on icon click

后端未结

关注

 6  1974

孤街浪徒 2020-12-03 13:27

I have an HTML5 date picker.
It is opened when I click on the date picker text box.

Todo :

I have to change the event to an icon,

6条回答

庸人自扰 (楼主)

2020-12-03 14:05

If you don't mind having the calendar icon inside the date input field then a cross browser alternative would be to position a calendar icon over top of the triangle calendar picker indicator and then set the calendar icon to pointer-events: none which will cause all click events to be passed through to the triangle calendar picker indicator underneath. I'm not entirely sure how consistent the position of the calendar picker indicator is in different browsers but it should be pretty similar. See the example below.

.sd-container {
  position: relative;
  float: left;
}

.sd {
  border: 1px solid #1cbaa5;
  padding: 5px 10px;
  height: 30px;
  width: 150px;
}

.open-button {
  position: absolute;
  top: 10px;
  right: 3px;
  width: 25px;
  height: 25px;
  background: #fff;
  pointer-events: none;
}

.open-button button {
  border: none;
  background: transparent;
}