Flowbite日期选择器更新Input后无法触发phx-change="validate"事件

当从Flowbite日期选择器中选择日期时，选中的日期会显示在日期输入框中，但绑定的phx-change="validate"事件并未触发。以下是相关代码：

core_component.ex #

<input
  phx-hook="Datepicker"
  type="text"
  id={@id || @name}
  name={@name}
  value={@value}
  class={[
    "bg-gray-50 border pl-8 border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full ps-10 p-2.5  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500",
    @class
  ]}
  {@rest}
  placeholder="Select date"
/>

app.js #

Hooks.Datepicker = {
  mounted() {
      const datepickerEl = this.el;
      new Datepicker(datepickerEl, {
        autohide: true,
        buttons: true,
        format: 'yyyy-mm-dd',
      });
  },
  updated() {
      this.mounted();
  }
}

解决方案 #

问题出在Flowbite的Datepicker组件修改input值时，不会自动触发浏览器原生的input或change事件，而Phoenix的phx-change依赖这些原生事件触发回调。你需要在Datepicker的配置中添加onChange回调，手动触发对应的原生事件：

修改app.js中的Hook代码：

Hooks.Datepicker = {
  mounted() {
    const datepickerEl = this.el;
    new Datepicker(datepickerEl, {
      autohide: true,
      buttons: true,
      format: 'yyyy-mm-dd',
      // 添加onChange回调触发原生事件
      onChange: (selectedDate, datepicker) => {
        // 触发input事件（phx-change默认监听input事件，适合实时验证）
        datepickerEl.dispatchEvent(new Event('input', { bubbles: true }));
        // 若需在失去焦点时触发验证，可替换为change事件：
        // datepickerEl.dispatchEvent(new Event('change', { bubbles: true }));
      }
    });
  },
  updated() {
    this.mounted();
  }
}

关键说明 #

• bubbles: true确保事件能向上冒泡，让Phoenix的事件监听器捕获到。
• 优先使用input事件适配Phoenix默认的实时验证逻辑；若验证需在用户完成输入后触发，再选择change事件。

内容的提问来源于stack exchange，提问作者Jason O.