vanilla-js inline datepicker的changeDate事件绑定问题求助

针对inline类型的日期选择器，你可以通过以下两种方式正确捕获日期变更事件：

方法1：初始化时配置onChange回调（推荐） #

这是库官方推荐的方式，直接在实例化Datepicker时传入回调函数：

const elem = document.getElementById('foo');
const datepicker = new Datepicker(elem, {
  inline: true,
  date: '01/25/2020',
  onChange: (selectedDate, dp) => {
    console.log('选中的日期:', selectedDate);
    // 可通过dp参数访问datepicker实例的其他属性
  }
});

方法2：正确绑定changeDate事件到DOM元素 #

如果你坚持使用事件监听的方式，需要确保事件绑定在初始化的DOM元素上，且绑定操作在datepicker实例化之前执行：

const elem = document.getElementById('foo');

// 先绑定事件
elem.addEventListener('changeDate', (e) => {
  console.log('选中的日期:', e.detail.date);
});

// 再实例化datepicker
new Datepicker(elem, {
  inline: true,
  date: '01/25/2020'
});

为什么你的代码无效？ #

• 你尝试给datepicker实例绑定事件，但该实例是JavaScript对象而非DOM元素，addEventListener仅适用于DOM节点，因此这种方式不生效。
• 若你是在实例化之后才绑定事件到elem，可能会错过事件触发时机，确保绑定操作在实例化之前执行。

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