Question

我从谷歌API中提取数据，然后我试图在图表上显示。 API调用所需的部分参数是start-date“和”end-date“。为此，我想使用此引导程序date range picker让用户能够选择这些日期然后调整它们相应的API调用。要进行API调用我正在使用此包：percolate:google-api。

以下是API调用的示例：

GoogleApi.get('youtube/analytics/v1/reports', { params: { 'end-date': "2015-10-31", metrics: "views", ids: "channel==MINE", 'start-date': "2015-10-01", metrics: "views", dimensions: "day", sort: "-day"}}, function(error, result) {
});

以下是日期范围选择器的示例：

Template.apps.rendered = function(){

$('#reportrange span').html(moment().subtract(29, 'days').format('YYYY-MM-DD') + ' - ' + moment().format('YYYY-MM-DD'));

$('#reportrange').daterangepicker({
    format: 'YYYY-MM-DD',
    startDate: moment().subtract(29, 'days'),
    endDate: moment(),
    showDropdowns: true,
    showWeekNumbers: true,
    timePicker: false,
    timePickerIncrement: 1,
    timePicker12Hour: 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(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')]
    },
    opens: 'left',
    drops: 'down',
    buttonClasses: ['btn', 'btn-sm'],
    applyClass: 'btn-primary',
    cancelClass: 'btn-default',
    separator: ' to ',
    locale: {
        applyLabel: 'Submit',
        cancelLabel: 'Cancel',
        fromLabel: 'From',
        toLabel: 'To',
        customRangeLabel: 'Custom',
        daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr','Sa'],
        monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
        firstDay: 1
    }
}, function(start, end, label) {
    console.log(start.format('YYYY-MM-DD'), end.format('YYYY-MM-DD'), label);
    $('#reportrange span').html(start.format('YYYY-MM-DD') + ' - ' + end.format('YYYY-MM-DD'));
});

};

我想拥有它，所以当用户第一次访问该页面时，它会自动设置为“过去30天”，但如果他们想要选择不同的日期，他们可以这样做并让我的API调用自动更新

我怎样才能做到这一点？任何代码示例都非常受欢迎，因为我对Meteor / JS来说相当新。谢谢！

Answer 1

我会使用reactive-vars来设置startDate，endDate的值以及您用来跟踪API调用结果的任何内容。然后，您可以将API调用放在Template.instance().autorun()中，并依赖于startDate和endDate反应变量。

Meteor：如何让JS日期范围选择器调整API调用日期参数

1 个答案: