代码之家 › 专栏 › 技术社区 › tp45

vanillajs日期选择器未设置输入值,点击日期时未触发更改事件

alpine.js laravel-livewire datepicker javascript

tp45 · 技术社区 · 1 年前

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

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

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);
});

<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">

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

我需要帮助。

我也将其与livewire和alpine一起使用,但在点击日期后,甚至不会触发更改。这是我的laravel代码
code

当我测试pickaday时,它有效。

我该如何解决这一问题,或者即使在 vanillajs datepicker .

提前谢谢。

1 回复 | 直到 1 年前

Chris G 1 年前

你的库不会触发像这样的本地事件 onchange 这就是为什么不起作用。您必须使用库自定义事件

文档中的信息 changedate

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">