daterangepicker - shows previous selected ranges as well

[yameen-zargar]

I am using daterangepicker plugin to get the date ranges. After clicking apply button multiple times, it gives all the previous date ranges which were selected rather than giving the current selected date range. I just need the current selected range instead of all previous ranges. Can someone suggest a fix.

Stackoverflow link: https://stackoverflow.com/questions/73877693/daterangepicker-shows-previous-selected-ranges-as-well

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()],
            // 'This Month': [moment().startOf('month'), moment().add(1, 'days')],
            // 'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
        }
    }, 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');
            }
        });
    });



    });

});`

[dangrossman]

You're creating a form submit handler inside the callback function for the date range changing, so every time a new date range is selected, you attach another form submit handler to the form. If someone selects 3 date ranges, you now have 3 functions that will run when the form gets submitted, not one.

Instead of doing that, update some global start_date/end_date variables that exist outside of the callback function and move your form submit handler outside that function too.

Or, have the callback function populate some hidden inputs in your form, and then just treat them as any other input in your code to handle the form, which doesn't need to be inside the daterangepicker callback.

[yameen-zargar]

Thanks fixed it, exactly function was being called multiple times because of form handler in callback function.