Multiple DateRangePicker on the same form

Question

I've written the following code.

var start = moment().subtract(1, 'days');
var end = moment().subtract(1, 'days');
var start2 =moment().subtract(2, 'days');
var end2 =moment().subtract(2, 'days');

function cb(start, end, start2, end2) {
    console.log(start2);
    $('#reportrange3 span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
    $('#reportrange4 span').html(start2.format('MMMM D, YYYY') + ' - ' + end2.format('MMMM D, YYYY'));
    retrievedata(start.format('YYYY-MM-DD'), end.format('YYYY-MM-DD'),start2.format('YYYY-MM-DD'), end2.format('YYYY-MM-DD') );
}

$('#reportrange3').daterangepicker({
    startDate: start,
    endDate: end,
    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(29, 'days'), moment()],
        'This Month': [moment().startOf('month'), moment().endOf('month')],
        'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
    }
}, cb);

$('#reportrange4').daterangepicker({
    startDate: start2,
    endDate: end2,
    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(29, 'days'), moment()],
        'This Month': [moment().startOf('month'), moment().endOf('month')],
        'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
    }
}, cb);

cb(start, end, start2, end2);

The problem I've got is that updating the values of both reportrange, the console.log(start2) returns a text value, such as "Today" or "Yesterday", so it ends with an error as "today".format('MMMM D, YYYY') does not really work...

Any idea? Thanks!

Answer 1

Finally I've found the solution, the problem was coming from variables scope.

startnew = moment().subtract(1, 'days');
endnew = moment().subtract(1, 'days');
startnew2 =moment().subtract(2, 'days');
endnew2 =moment().subtract(2, 'days');

function cb3(start, end) {
            startnew = start;
            endnew = end;
            $('#reportrange3 span').html(startnew.format('MMMM D, YYYY') + ' - ' + endnew.format('MMMM D, YYYY'));
            retrievedata(startnew.format('YYYY-MM-DD'),endnew.format('YYYY-MM-DD'),startnew2.format('YYYY-MM-DD'),endnew2.format('YYYY-MM-DD'));

        }
function cb4(start2, end2) {
            startnew2 = start2;
            endnew2 = end2;
            $('#reportrange4 span').html(start2.format('MMMM D, YYYY') + ' - ' + endnew2.format('MMMM D, YYYY'));
            retrievedata(startnew.format('YYYY-MM-DD'),endnew.format('YYYY-MM-DD'),startnew2.format('YYYY-MM-DD'),endnew2.format('YYYY-MM-DD'));
        }



$('#reportrange3').daterangepicker({
            startDate: startnew,
            endDate: endnew,
            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(29, 'days'), moment()],
               'This Month': [moment().startOf('month'), moment().endOf('month')],
               'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
            }
        }, cb3);

$('#reportrange4').daterangepicker({
            startDate: startnew2,
            endDate: endnew2,
            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(29, 'days'), moment()],
               'This Month': [moment().startOf('month'), moment().endOf('month')],
               'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
            }
        }, cb4);

cb3(startnew, endnew);
cb4(startnew2, endnew2);