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

Here is my code
I tested this on 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/vanillajs-datepicker@1.3.4/dist/css/datepicker.min.css">
<script src="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.3.4/dist/js/datepicker-full.min.js"></script>

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

当我单击日期 Select 器上的特定日期时,不会触发更改事件.

我需要帮助.

I'm also using it with livewire and alpine but after clicking the date the change even is not triggered. here is my laravel code
code

当我测试镐时,它有效.

我如何才能解决这个问题,或者即使在vanillajs datepicker时也能触发更改.

提前感谢.

推荐答案

您的库不会触发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/vanillajs-datepicker@1.3.4/dist/css/datepicker.min.css">
<script src="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.3.4/dist/js/datepicker-full.min.js"></script>
<input type="text" name="foo">

Javascript相关问答推荐

使用useParams路由失败

将数据从strapi提取到next.js,但响应延迟API URL

*ngFor和@代表输入decorator 和选角闭合

D3多线图显示1线而不是3线

有条件的悲剧

Javascript,部分重排序数组

将状态向下传递给映射的子元素

角色 map 集/spritebook动画,用户输入不停止在键上相位器3

使用LocaleCompare()进行排序时,首先使用大写字母

为什么我的导航条打开状态没有在窗口addeventlistener(Reaction Js)中更新?

编辑文本无响应.onClick(扩展脚本)

使用Google API无法进行Web抓取

400 bad request error posting through node-fetch

NG/Express API路由处理程序停止工作

TypeError:无法读取未定义的属性(正在读取';宽度';)

如何找到带有特定文本和测试ID的div?

Next.js无法从外部本地主机获取图像

Cherrio JS返回父div的所有图像SRC

如何在Jest中模拟函数

如何使用Cypress在IFRAME中打字