javascript - 有没有办法在输入日期触发日历？

Question

我已经习惯将 jQuery datepicker 放在我的代码中，但我找到了下图的原生输入（input type="date"）并决定给它一个机会。我试图触发日历以在双击事件上显示，就像用户单击右侧的箭头一样，但没有成功，因为我无法确定浏览器如何实现它（Chrome 56.0.2924.87）。

如果可能的话，任何人都有一个想法，我该怎么做？

提前致谢。

输入日期

Answer 1

我找到了一种跨浏览器工作的更好方法。

唯一的缺点是您看不到图标。

这个想法是将日期输入设置为相对，然后绝对定位日期选择器图标以跨越整个输入，并将其不透明度设置为 0，使其不可见。

当您单击输入时，这会触发跨浏览器的日期选择器。

代码：

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