Question

我想在单击日期选择器时调用函数，以便可以根据给定的输入日期动态更改图形。所以下面是我的日期选择器代码的一部分

<div id="reportrange" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
<i class="fa fa-calendar"></i>&nbsp;
<span></span> <i class="fa fa-caret-down"></i>
</div>

下面是我的脚本

<script>

$(function() {
var start = moment().subtract(6, 'days');
var end = moment();

$('#reportrange').daterangepicker.ranges.on({click:function () 
{
    addtoday()

}
});
function cb(start, end) {
    $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));

}

$('#reportrange').daterangepicker({
    startDate: start,
    endDate: end,
    minDate: '-1Y',
    maxDate:new Date(),
    ranges: {
       'Today': [moment(), moment(),],
       'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days'),addyesterday()],
       '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);

});

当我单击“今天”范围时，我必须今天更新我的图表，即功能addtoday（）

下面是我必须调用的函数

function addData1() {
    let abc = [{% for item in values1 %}
        {{item}},
    {% endfor %}]
    mixedChart.data.datasets[1].data = abc;
    mixedChart.update();
}

Answer 1

尝试一下。

$('#date-range0')
  .dateRangePicker().bind('datepicker-change',function(event,obj){
    /* This event will be triggered when second date is selected */
        console.log(obj);
        });

---更新----

$('#reportrange').daterangepicker({
    startDate: start,
    endDate: end,
    minDate: '-1Y',
    maxDate:new Date(),
    ranges: {
       'Today': [moment(), moment(),],
       'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days'),addyesterday()],
       '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).bind('datepicker-change',function(event,obj){
    addData1()
        })

Answer 2

我得到了部分答复@Sooriya Dasanayake。我申请时只能执行一个功能，但是当我不同地应用日期时，我想更改功能。非常感谢@Sooriya Dasanayake的工作，但我正处于获得正确结果的边缘

<script>

$(function() {
var start = moment().subtract(6, 'days');
var end = moment();


function cb(start, end) {
    $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));

}

$('#reportrange').daterangepicker({
    startDate: start,
    endDate: end,
    minDate: moment().subtract(365, 'days'),
    maxDate:moment(),
    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);

});

 $('#reportrange').on('apply.daterangepicker', function() {
if(Today='Today')
    addtoday();
if(Yesterday='Yesterday')
   addyesterday();
if(lastweek='Last 7 Days')
   lastweek();
if(presentmonth='This Month')
   presentmonth();
if(any_date='Custom Range')
   any_date();
 });


 </script>

回调功能无法正常点击

2 个答案: