vanilla-js 内联日期选择器的 changeDate 事件答案

【问题标题】：changeDate event for vanilla-js inline datepickervanilla-js 内联日期选择器的 changeDate 事件
【发布时间】：2022-11-14 23:16:18
【问题描述】：

我最近找到了这个库，vanilla-js datepicker (https://mymth.github.io/vanillajs-datepicker/#/)，我正在尝试使用内联选择器。

例子：

<div id="foo" data-date="01/25/2020"></div>

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

const datepicker = new Datepicker(elem, {
  // ...options
});

到目前为止，一切都很好，我的网站上显示了选择器。

我的问题是我无法获取更改日期，根据内联日期选择器的文档 (https://mymth.github.io/vanillajs-datepicker/#/api?id=events)，我应该获取块元素，即 <div id="foo" data-date="01/25/2020"></div>，并且有一个名为 changeDate (@ 987654323@)。

因此，据此，我认为这是我应该处理的代码：

elem.addEventListener('changeDate', (e) => {
    console.log('Date selected');
  })

我也试过

datepicker.addEventListener('changeDate', (e) => {
    console.log('Date selected');
  })

但是不，对我不起作用，这可能会被视为重复问题，但这里的示例适用于输入类型的日期选择器，但不适用于内联的。

任何帮助都感激不尽。提前致谢！

【问题讨论】：

标签： javascript datepicker

【解决方案1】：

没关系，因为我也在使用 EditorJS 制作自定义块，所以我没有以正确的方式定位元素。

  this.wrapper.querySelector(elem).addEventListener('changeDate', (e) => {
    console.log(this.datePicker.getDate());
  })

这段代码现在可以工作了。

【讨论】：

【解决方案2】：

要使其工作，您需要定位datepicker 的元素。

datepicker.element.addEventListener('changeDate', (e) => {
    console.log('Date selected');
  })

codepen example

【讨论】：