如何在输入中的任意位置单击时打开 HTML 日期选择器对话框？ [复制]答案

【问题标题】：How To Open HTML Date Picker Dialog On Click Anywhere Inside Input? [duplicate]如何在输入中的任意位置单击时打开 HTML 日期选择器对话框？ [复制]
【发布时间】：2021-04-26 16:26:13
【问题描述】：

带有 type=date 的默认 HTML 输入 （代码如下） 将显示日期选择器输入。

但是，日期选择器对话框只有在您单击输入最右侧的日历图标时才会打开。

如果您单击输入中的其他任何位置，则对话框不会打开。

当您单击输入中的任意位置时，如何启用输入以打开日期选择器对话框？

注意：我已经在 Stack Overflow 和互联网上搜索过类似问题的答案，但没有找到合适的解决方案。

<label for="session-date">Start date:</label>

<input type="date" id="session-date" name="session-date">

【问题讨论】：

如果您不希望人们将您的问题作为这些“类似问题”的重复而结束，请在您的问题中提及这些类似问题并说明它们是如何解决您的问题的。
@HereticMonkey 我确实指出该问题在最后一段中没有解决我的问题。决定将问题标记为重复的人阅读了标题并认为它是重复的，并且直到最后才真正阅读。

标签： javascript html css forms

【解决方案1】：

点击字段时应该这样做（没有js！）；当它第一次聚焦时，它只监听输入，但你可以用 js 解决。

input#session-date {
    display: inline-block;
    position: relative;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    background: transparent;
    bottom: 0;
    color: transparent;
    cursor: pointer;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
}

注意：使用此方法您会丢失图标，但您绝对可以添加一个：

Here's the demo on codepen

【讨论】：

这也适用于 Firefox 吗？
这在 Firefox 中不起作用

【解决方案2】：

这是我的解决方案：

我不知道如何修改它内置在 js 中的事件，但我们可以使用 css 作弊。

input#session-date{
  position:relative;
  overflow:hidden;
}
input#session-date::-webkit-calendar-picker-indicator{
  display:block;
  top:0;
  left:0;
  background: #0000;
  position:absolute;
  transform: scale(12)
}

<label for="session-date">Start date:</label>

<input type="date" id="session-date" name="session-date">

【讨论】：