Daterangepicker与callback和apply.daterangepicker的行为不同

Question

我最近遇到了一个关于日期选择器的问题。我有一个表单，希望在用户选择新的日期范围时提交它。我使用了daterangepicker回调，并注意到，尽管我在回调中获得了新选择的日期的正确值，但表单提交的是daterange字段中的前一个值。

假设我在daterange字段中有一个值2018-08-01 - 2018-08-07，并且我已经使用下面的代码片段将它更改为2018-08-04 - 2018-08-06

$('.multi-datepicker').daterangepicker({
        opens: 'left',
        timePicker: false,
        showCustomRangeLabel: true,
        locale: {
            format: 'YYYY-MM-DD'
        }
    }), () => { $('form#topFilter').submit(); };

但我在服务器端得到的值是前一个值，即2018-08-01 - 2018-08-07。

然后我试了试apply.daterangepicker，它似乎工作得很好。

$('.multi-datepicker').on('apply.daterangepicker', function (event, picker) {
    $('form#topFilter').submit();
})

由于我希望表单仅在值发生更改时提交，而不是仅在单击apply按钮而没有实际更改时提交，因此我更喜欢使用回调方法。有人知道为什么会发生这种情况吗？

Answer 1

当更改已在插件的内部属性中注册，但尚未同步到DOM中时，回调函数将触发。

apply.daterangepicker事件在DOM更新后触发。这就是表单提交在第二个示例中起作用的原因。