如何实现点击输入框任意位置触发Chrome/Edge原生datepicker日期选择器

在Chrome和Edge浏览器中，只有点击输入框右侧圈出的图标才能唤起日期选择器，但不熟悉电脑操作的测试用户不知道点击位置，反馈功能无法使用。

请问是否有方案可以实现点击输入框任意位置即可唤起日期选择器？

我已经尝试过公开方案但没有生效，我使用的是最新版Chrome/Edge浏览器和Bootstrap 4.6版本。

我的输入框对应的HTML代码如下：

<div class="form-group col-md-3 col-sm-12">
   <label class="control-label" for="Date">日期:</label>
   <input id="Date" type="date" class="form-control picker" name="Date" value="" />
</div>

火狐浏览器默认就支持点击输入框任意位置唤起日期选择器，恳请各位提供可行的解决方案。

解决方案 #

方案1：纯CSS实现（无JS依赖，优先推荐）

通过拉伸Chrome/Edge原生日期选择器的触发图标伪元素，使其覆盖整个输入框区域，点击输入框任意位置即可触发选择器，代码如下：

/* 日期输入框外层容器加相对定位 */
.form-group {
    position: relative;
}

/* 拉伸日期选择器触发图标覆盖整个输入框 */
input[type="date"]::-webkit-calendar-picker-indicator {
    background: transparent;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

该方案不会修改火狐浏览器原有默认交互，同时兼容所有主流Chrome/Edge版本。

方案2：JS兜底实现（兼容极端场景）

如果CSS方案无法满足需求时，可以通过JS主动触发原生日期选择器弹窗：

const dateInput = document.getElementById('Date');
dateInput.addEventListener('click', function() {
    // 调用原生API触发弹窗
    if (typeof this.showPicker === 'function') {
        this.showPicker();
        return;
    }
    // 旧版浏览器兜底逻辑
    this.focus();
    this.dispatchEvent(new KeyboardEvent('keydown', { key: 'F4' }));
});

showPicker是现代浏览器原生支持的输入框API，2022年及以后发布的Chrome/Edge版本均已支持，覆盖绝大多数用户群体。

内容的提问来源于stack exchange，提问作者N.MORR