Daterangepicker回调与apply事件表现差异及表单提交值异常问题

我来帮你理清楚这个问题的根源，以及如何实现你想要的「仅在日期变化时提交表单」的需求：

问题原因 #

你最初尝试的构造函数回调写法（把提交逻辑放在daterangepicker()的第二个参数里），核心问题在于回调的执行时机不对：
当用户点击「Apply」按钮时，Daterangepicker会先触发这个构造函数回调，然后才会把新选择的日期值同步到对应的输入框中。所以你在回调里立即提交表单时，输入框里还是旧的日期值，服务器自然接收到的是旧数据。

而apply.daterangepicker事件则是Daterangepicker在完成输入框值更新之后才触发的，这时候提交表单就能拿到最新的日期范围了。

满足需求的解决方案 #

你想要的是「仅在日期值确实变化时提交，点击Apply但没改值时不提交」，直接用apply.daterangepicker事件配合日期比较就能实现，不需要纠结构造函数回调。Daterangepicker的picker对象自带oldStartDate和oldEndDate属性，这两个是用户打开选择器之前的原始日期，我们可以用它们来判断日期是否真的发生了变化：

// 初始化Daterangepicker
$('.multi-datepicker').daterangepicker({
  opens: 'left',
  timePicker: false,
  showCustomRangeLabel: true,
  locale: { format: 'YYYY-MM-DD' }
});

// 监听apply事件，仅在日期变化时提交表单
$('.multi-datepicker').on('apply.daterangepicker', function (event, picker) {
  // 比较新旧日期是否完全一致
  const hasDateChanged = !picker.startDate.isSame(picker.oldStartDate) || !picker.endDate.isSame(picker.oldEndDate);
  
  if (hasDateChanged) {
    $('form#topFilter').submit();
  }
});

这段代码的逻辑很清晰：

1. 每次用户点击Apply时，对比新选择的日期（picker.startDate/picker.endDate）和打开选择器前的旧日期（picker.oldStartDate/picker.oldEndDate）
2. 只有当任意一个日期（开始或结束）发生变化时，才提交表单
3. 如果用户只是打开选择器又点了Apply但没改日期，不会触发表单提交

这样既解决了旧值提交的问题，又完美实现了你想要的「仅变化时提交」的需求。

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