同一表单上的多个 DateRangePicker答案

【问题标题】：Multiple DateRangePicker on the same form同一表单上的多个 DateRangePicker
【发布时间】：2017-01-02 09:10:09
【问题描述】：

我已经编写了以下代码。

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);

我遇到的问题是更新两个reportrange的值，console.log(start2)返回一个文本值，例如“今天”或“昨天”，所以它以“今天”的错误结束.format('MMMM D, YYYY') 真的不行……

有什么想法吗？谢谢！

【问题讨论】：

这个jsfiddle 工作得很好。你能做一个小提琴让我帮你吗？

标签： jquery datepicker jquery-ui-datepicker daterangepicker

【解决方案1】：

我终于找到了解决方案，问题来自变量范围。

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);

【讨论】：