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

Question

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

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

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

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

注意：我已经在堆栈溢出上和互联网上搜索了类似问题的答案，但没有得到正确的解决方案。

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

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

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

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

这是codepen上的演示