vanillajs-datepicker 不设置输入值，点击日期时不会触发更改事件

Question

美好的一天

我正在使用这个日期选择器，我喜欢它，但在我单击日期后它不会触发输入上的更改事件。

这是我的代码
我在 jsFiddle 上测试了这个

<input type="text" name="foo">

const elem = document.querySelector('input[name="foo"]');
const datepicker = new Datepicker(elem, {
  autohide: true,
  todayHighlight: true,
  format: "yyyy-mm-dd",
});

elem.addEventListener("change", function (e) {
  console.log(e.target.value);
});

当我单击日期选择器上的特定日期时，不会触发更改事件。

我需要这方面的帮助。

我还将它与 livewire 和 alpine 一起使用，但单击日期后，甚至没有触发更改。这是我的 Laravel 代码

当我测试 pickaday 时它有效。

我如何解决这个问题或使其即使在 vanillajs datepicker 上也能触发更改。

提前致谢。

Answer 1

您的库不会触发像

onchange

这样的本机事件，这就是它不起作用的原因。您必须使用库自定义事件来代替

文档中的信息 更改日期

const elem = document.querySelector('input[name="foo"]');
const datepicker = new Datepicker(elem, {
  autohide: true,
  todayHighlight: true,
  format: "yyyy-mm-dd",
});

elem.addEventListener("changeDate", function (e) {
  console.log(e.target.value);
});

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/datepicker.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/datepicker-full.min.js"></script>
<input type="text" name="foo">