我来帮你搞定这个问题，主要有几个关键细节需要调整：

1. 先修正脚本加载顺序 #

你现在的脚本加载顺序是先加载flatpickr，再加载jQuery——这会导致jQuery还未定义时，flatpickr的jQuery适配逻辑无法正常工作（虽然你说选择器功能正常，但这是潜在的不稳定因素）。必须把jQuery放在flatpickr前面：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.5.7/flatpickr.min.js"></script>

2. 使用flatpickr官方推荐的onChange回调 #

flatpickr有自己的事件系统，依赖原生change事件容易出现不触发的情况，官方更推荐直接在初始化配置中指定onChange函数，这是最可靠的方式：

// 给所有.flatpickr元素绑定日期变更事件
$(".flatpickr").flatpickr({
  onChange: function(selectedDates, dateStr, instance) {
    alert("日期已更改：" + dateStr);
    // 这里可以直接调用你的自定义函数
    // myfunction(selectedDates, dateStr);
  }
});

// 针对带禁用范围的选择器，也可以单独配置onChange
$("#flatpickr-disable-range").flatpickr({
  disable: [
    { from: "2016-08-16", to: "2016-08-19" },
    "2016-08-24",
    new Date().fp_incr(30) // 30 days from now
  ],
  onChange: function(selectedDates, dateStr) {
    alert("禁用范围的日期选择器已更改：" + dateStr);
  }
});

3. 如果坚持用jQuery的.change()事件 #

如果你一定要用原生change事件绑定，需要确保事件绑定在flatpickr初始化之后，并且可以用事件委托来提升稳定性（避免动态生成元素的问题）：

$(document).ready(function() {
  // 先初始化所有flatpickr组件
  $(".flatpickr").flatpickr();
  $("#flatpickr-disable-range").flatpickr({
    disable: [
      { from: "2016-08-16", to: "2016-08-19" },
      "2016-08-24",
      new Date().fp_incr(30)
    ]
  });

  // 绑定change事件（直接绑定）
  $(".flatpickr").change(function() {
    alert("Handler for .change() called.");
  });

  // 或者用事件委托，适配动态生成的元素
  $(document).on("change", ".flatpickr", function() {
    alert("Handler for .change() called (事件委托版).");
  });
});

另外记得把所有JS代码放在$(document).ready()中，确保DOM元素加载完成后再初始化flatpickr，避免找不到元素的问题。

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