如何为日历图标绑定事件监听器实现自定义日期选择器功能

核心问题原因 #

• 原代码中input[type=date]使用display: none隐藏，浏览器会拦截针对完全不可见元素的模拟点击事件
• 直接调用click()方法唤起日期选择面板的兼容性差，不属于标准实现方案

修复步骤 #

步骤1：修改隐藏日期输入框的隐藏方式 #

不要使用display: none，改用不占用布局、不响应交互但仍被浏览器视为可见元素的隐藏方案：

<input type="text" name="Birth" id="calendarInput" required  class="inputField" placeholder="31.12.2001">
<!-- 修改隐藏样式 -->
<input type="date" name="Birth" id="calendarHiddenInput" pattern="\d{4}-\d{2}-\d{2}"  style="position: absolute; opacity: 0; width: 0; height: 0; overflow: hidden; pointer-events: none;">
<img id="calendarImg" src="images/calendarIcon.png" alt="日历图标">

步骤2：替换点击触发逻辑，使用标准API唤起日期面板 #

使用HTMLInputElement的标准showPicker()方法唤起选择面板，兼容性更好，不会被浏览器安全策略拦截（当前触发逻辑是用户主动点击图标，符合交互触发要求）：

$('#calendarImg').click(function () {
    const hiddenDateInput = $('#calendarHiddenInput')[0];
    if (hiddenDateInput.showPicker) {
        hiddenDateInput.showPicker();
    } else {
        // 兼容旧浏览器的降级方案
        hiddenDateInput.focus();
        hiddenDateInput.click();
    }
});

步骤3：补充日期值同步逻辑 #

按你需要的dd.mm.yyyy格式同步到文本输入框：

$('#calendarHiddenInput').on('change', function() {
    if (!this.value) return;
    const [year, month, day] = this.value.split('-');
    $('#calendarInput').val(`${day}.${month}.${year}`);
});

内容的提问来源于stack exchange，提问作者Daniil Zakharov