bootstrap-datepicker的change事件无法被Stimulus JS捕获如何解决

bootstrap-datepicker 是jQuery生态的组件，选中日期时触发的changeDate、change事件都是通过jQuery内部事件系统派发的，不会触发浏览器原生DOM事件。

• jQuery的on方法监听的是自身维护的事件队列，所以写jQuery事件绑定可以正常响应
• Stimulus的动作绑定底层用的是浏览器原生addEventListener，只能捕获原生DOM事件，因此无法接收到这部分jQuery派发的事件。手动输入内容时的input/change是浏览器原生触发的，所以能正常响应，点选日期时的事件走的jQuery通道，Stimulus收不到。

方案1：控制器生命周期内绑定事件（最稳妥，推荐） #

直接在Stimulus控制器的connect钩子中，对日期选择器绑定事件，直接调用对应处理方法，不需要额外修改全局配置：

// app/javascript/controllers/next_date_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  connect() {
    // 初始化datepicker（如果已经全局初始化可以跳过这步）
    $(this.element).datepicker()
    // 绑定datepicker的选中事件，直接触发提交逻辑
    .on('changeDate', (e) => this.submit(e))
  }

  submit(e) {
    // 这里写你原有的提交逻辑
    console.log('已选中日期，触发提交', e.currentTarget.value)
  }
}

对应表单字段只需要标记控制器即可，不需要额外绑定change动作：

<%= form.text_field :target_date, class: 'datepicker', data: { controller: 'next-date' } %>

方案2：全局配置datepicker派发原生事件 #

如果不想每个控制器单独写绑定逻辑，可以在全局初始化datepicker时，手动触发原生DOM事件，让Stimulus可以正常捕获：

// 全局datepicker初始化代码
$(document).on('turbo:load', function() {
  $('.datepicker').datepicker({
    // 你原有的datepicker配置项，比如format、startDate等
  }).on('changeDate', function(e) {
    // 手动派发原生change事件，允许冒泡，Stimulus就能正常识别
    e.target.dispatchEvent(new Event('change', { bubbles: true }))
  })
})

配置完成后，你原来写的data: { action: 'change->next-date#submit' }就可以正常工作，不需要修改控制器代码。

注意：不要依赖input事件做兼容，点选日期时不会触发原生input事件，只有键盘手动输入才会触发，会出现点选无响应、手动输入才触发的bug。

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