vanillajs-datepicker点击日期不触发change事件且未设输入值求助

vanillajs-datepicker在选择日期更新输入框值后，不会自动触发原生change事件，这是它和Pickaday的核心差异点。要解决这个问题，需要利用插件提供的自定义事件来手动触发原生事件或直接处理业务逻辑。

基础场景解决方案 #

修改你的JavaScript代码，监听插件专属的changeDate事件，在事件回调中手动触发输入框的原生change事件：

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

// 监听datepicker的日期变更事件
elem.addEventListener('changeDate', function() {
  // 手动触发原生change事件
  this.dispatchEvent(new Event('change'));
});

// 原生change事件现在会正常触发
elem.addEventListener("change", function(e) {
  console.log(e.target.value);
});

你也可以直接在changeDate事件回调中处理业务逻辑，省去监听原生change事件的步骤：

elem.addEventListener('changeDate', function(e) {
  console.log(this.value); // 直接获取更新后的日期值
});

Livewire + Alpine.js 场景解决方案 #

在Laravel的Livewire和Alpine.js组合环境中，需要在Alpine的初始化逻辑中完成datepicker的配置，并通过触发change事件让Livewire感知到值的更新：

<div 
  x-data="{
    initDatepicker() {
      const input = $refs.dateInput;
      new Datepicker(input, {
        autohide: true,
        todayHighlight: true,
        format: 'yyyy-mm-dd',
      });
      
      // 监听日期变更并触发change事件，同步到Livewire
      input.addEventListener('changeDate', () => {
        input.dispatchEvent(new Event('change'));
      });
    }
  }"
  x-init="initDatepicker()"
>
  <input 
    type="text" 
    x-ref="dateInput" 
    wire:model="selectedDate"
  >
</div>

这样配置后，当你选择日期时，change事件会被触发，Livewire的wire:model也能同步更新对应属性的值。

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