daterangepicker多次点击Apply后返回历史选中范围问题求助

使用daterangepicker插件获取日期范围时，多次点击Apply按钮后，插件返回的是所有之前选中过的日期范围，而非当前选中的范围，仅需当前选中的范围，求排查问题及修复方案。

HTML代码 #

<form id="form">
    <div class="d-flex date_selector">
        <div id="reportrange" class="form-control">
            <i style="position: inherit; color: #929292" class="fa fa-calendar"></i>
            <span id="date-display"></span> <i style="position: inherit; color: #929292" class="fa fa-caret-down"></i>
        </div>
        <button class="btn stat-date-submit" id="submit" type="submit">Apply</button>
    </div>
</form>

JavaScript代码 #

$(document).ready(function () {

    let data = JSON.parse(`{{community_stats|safe}}`); // Data from controller
    fill_data(data);

    let start = moment().subtract(30, 'days');
    let end = moment();
    $('#reportrange span').text(start.format('MMM D') + ' - ' + end.format('MMM D, YYYY'))
    
    $('#reportrange').daterangepicker({
        startDate: start,
        endDate: end,
        maxDate: end,
        autoApply: true,
        ranges: {
            'Today': [moment(), moment()],
            'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
            'Last 7 Days': [moment().subtract(6, 'days'), moment()],
            'Last 30 Days': [moment().subtract(30, 'days'), moment()]
        }
    }, function(start, end) {
        let start_date = start
        console.log("start date in cb: ", start_date)
        let end_date = end
        console.log("end date in cb: ", end_date)

        $('#reportrange span').text(start_date.format('MMM D') + ' - ' + end_date.format('MMM D, YYYY'));
        start_date = start_date.format('YYYY-MM-DD')
        end_date = end_date.format('YYYY-MM-DD')
        console.log("start and end date to submit function: ", start_date, end_date)

        $("#form").submit(function (e) {

            $("#submit").attr('disabled', 'disabled');
            $("#submit").addClass('is-loading');

            e.preventDefault();
            console.log(typeof(start))
            console.log(typeof(end))

            console.log("start date in submit_function: ", start_date)
            console.log("end date in submit function: ", end_date)

            let data_obj = {
                'duration': "custom",
                "start_date": start_date,
                "end_date": end_date
            }

            console.log(data_obj)

            $.ajax({
                type: 'GET',
                url: "/analysis/",
                data: data_obj,
                success: function (data) {
                    fill_data(data);
                    $("#submit").removeAttr('disabled', 'disabled');
                    $("#submit").removeClass('is-loading');
                },
                error: function (data) {
                    $("#submit").removeAttr('disabled', 'disabled');
                    $("#submit").removeClass('is-loading');
                }
            });
        });
    });
});

问题原因 #

这是代码逻辑疏漏，和插件无关。核心问题是你将表单的submit事件监听绑定在了daterangepicker的回调函数内部，每次选择日期（触发回调）都会给表单新增一个submit事件监听。多次选择日期后，表单会绑定多个submit事件，点击Apply时所有绑定的事件都会执行，导致发送多次请求，看起来像是返回了所有历史选中范围。

修复方案 #

将表单的submit事件监听移到daterangepicker回调外部，确保只绑定一次；同时维护全局变量存储当前选中的日期，在daterangepicker回调中更新该变量，submit时直接使用最新值。

修改后的JavaScript代码 #

$(document).ready(function () {
    let data = JSON.parse(`{{community_stats|safe}}`); // Data from controller
    fill_data(data);

    // 初始化当前日期变量
    let start = moment().subtract(30, 'days');
    let end = moment();
    let currentStart = start.format('YYYY-MM-DD');
    let currentEnd = end.format('YYYY-MM-DD');

    // 初始化日期显示
    $('#reportrange span').text(start.format('MMM D') + ' - ' + end.format('MMM D, YYYY'));
    
    // 初始化daterangepicker
    $('#reportrange').daterangepicker({
        startDate: start,
        endDate: end,
        maxDate: end,
        autoApply: true,
        ranges: {
            'Today': [moment(), moment()],
            'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
            'Last 7 Days': [moment().subtract(6, 'days'), moment()],
            'Last 30 Days': [moment().subtract(30, 'days'), moment()]
        }
    }, function(selectedStart, selectedEnd) {
        // 更新日期显示文本
        $('#reportrange span').text(selectedStart.format('MMM D') + ' - ' + selectedEnd.format('MMM D, YYYY'));
        // 更新全局的当前日期变量
        currentStart = selectedStart.format('YYYY-MM-DD');
        currentEnd = selectedEnd.format('YYYY-MM-DD');
        console.log("当前选中日期范围:", currentStart, currentEnd);
    });

    // 表单提交事件仅绑定一次，移到外部
    $("#form").submit(function (e) {
        e.preventDefault();
        
        // 禁用按钮并添加加载状态
        $("#submit").attr('disabled', 'disabled').addClass('is-loading');

        // 组装提交数据
        let data_obj = {
            'duration': "custom",
            "start_date": currentStart,
            "end_date": currentEnd
        };

        console.log("提交的日期数据:", data_obj);

        // 发送AJAX请求
        $.ajax({
            type: 'GET',
            url: "/analysis/",
            data: data_obj,
            success: function (data) {
                fill_data(data);
                // 请求成功后恢复按钮状态
                $("#submit").removeAttr('disabled').removeClass('is-loading');
            },
            error: function () {
                // 请求失败后恢复按钮状态
                $("#submit").removeAttr('disabled').removeClass('is-loading');
            }
        });
    });
});

关键修改点 #

• 新增全局变量currentStart和currentEnd，专门存储当前选中的日期范围
• 将表单submit事件监听移到daterangepicker回调外部，确保仅绑定一次，避免重复触发
• daterangepicker回调仅负责更新日期显示和全局变量，不再处理事件绑定逻辑
• 简化AJAX请求后的按钮状态恢复代码，提升可读性

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