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

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

但是，当你点击输入最右边的日历图标时，日期选择器对话框才打开。

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

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

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

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

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

开始日期：

单击该字段时（不带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;
}

注意：使用此方法将丢失图标，但您肯定可以添加一个： 这是我的解决方案：

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

输入#会话日期{
位置：相对位置；
溢出：隐藏；
}
输入#会话日期：：-webkit日历选取器指示器{
显示：块；
排名：0；
左：0；
背景：#万；
位置：绝对位置；
变换：比例（12）
}

开始日期：

这在Firefox中也适用吗？如果你不想让人们把你的问题当作这些“类似问题”的重复来解决，请在你的问题中提及这些类似问题，并说明它们是如何解决你的问题的。@Hereticsmonkey我在最后一段中指出了这个问题并没有解决我的问题。无论是谁决定将问题标记为重复的，都会阅读标题，并认为它是重复的，而且直到最后才真正阅读。