2017-01-02 67 views
0

我寫了下面的代碼。多個DateRangePicker在同一個表格

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')並不真正起作用...

任何想法?謝謝!

+1

這[jsfiddle](https://jsfiddle.net/dp7rzmw5/2261/)工作得很好。你能創造一個小提琴,以便我可以幫助你嗎? –

回答

0

最後我找到了解決方案,問題來自變量範圍。

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