日期选择器change事件监听失效问题求助

核心原因 #

你用的日期选择器应该是第三方UI插件（比如jQuery UI Datepicker、Bootstrap Datepicker这类），这类插件在用户选择日期后，只会修改输入框的value值，但不会触发原生的change事件——原生change事件需要输入框失去焦点或用户手动输入完成后才会触发，而插件选择日期的操作绕开了这个触发逻辑。

解决方案 #

方案1：使用日期选择器插件自带的回调事件 #

不同的日期选择器插件有自己的日期选择完成事件，举两个常见例子：

• 若用jQuery UI Datepicker，用onSelect回调：

// 确保页面DOM加载完成后执行
$(document).ready(function() {
  $('#wkdt').datepicker({
    onSelect: function() {
      hidehours();
    }
  });
});

• 若用Bootstrap Datepicker，用changeDate事件：

$('#wkdt').on('changeDate', function() {
  hidehours();
});

方案2：替换为监听input事件 #

如果不确定插件类型，或者不想修改插件配置，可以把change事件换成input事件——大部分插件修改输入框值时会触发这个事件：

document.getElementById('wkdt').addEventListener("input", hidehours);

方案3：手动触发原生change事件 #

如果坚持要用change事件，可以在插件的回调里手动触发：

// 假设插件有选择完成的回调（根据实际插件调整）
document.getElementById('wkdt').yourDatePickerPlugin({
  onDateSelected: function() {
    // 手动触发change事件
    this.dispatchEvent(new Event('change'));
  }
});
// 保留原有的change监听
document.getElementById('wkdt').addEventListener("change", hidehours);

验证小技巧 #

可以先在浏览器控制台测试事件是否触发，快速定位可用事件：

const wkdt = document.getElementById('wkdt');
wkdt.addEventListener('input', () => console.log('input事件触发'));
wkdt.addEventListener('change', () => console.log('change事件触发'));

选择日期后查看控制台输出，就能明确哪个事件能被触发。

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