jQuery的DateRangePicker - 知道哪些插件的实例已我现在用的是DateRangePicker引导插件，并试图设置<code>parentEl</code>选项动态地使被解雇

Question

：

$('.dashboard-report-range').daterangepicker({ 
    ranges: { 
     'Today': [moment(), moment()], 
     'Yesterday': [moment().subtract('days', 1), moment().subtract('days', 1)], 
     'Last 7 Days': [moment().subtract('days', 7), moment()], 
     'Last 30 Days': [moment().subtract('days', 29), moment()], 
     'This Month': [moment().startOf('month'), moment().endOf('month')], 
     'Last Month': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')] 
    }, 
    opens: (App.isRTL() ? 'right' : 'left'), 
    format: 'DD/MM/YYYY', 
    separator: ' to ', 
    startDate: moment().subtract('days', 7), 
    endDate: moment().add('days', 1), 
    minDate: '01/01/2010', 
    maxDate: moment().add('days', 1), 
    timePicker: false, 
    opens: 'left', 
    parentEl: '#' + $(this).closest('.portlet').attr('id'), // this line 
    locale: { 
     applyLabel: 'Submit', 
     fromLabel: 'From', 
     toLabel: 'To', 
     customRangeLabel: 'Custom Range', 
     daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'], 
     monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'], 
     firstDay: 1 
    }, 
    showWeekNumbers: true, 
    buttonClasses: ['btn btn-default'], 
    applyClass: 'green btn-small btn-primary', 
    cancelClass: 'red btn-small pull-right', 
}, 

function (start, end) { 
    App.blockUI($('#dashboard')); // ideally want to make this the parentEl 

    setTimeout(function() { 
     App.unblockUI($('#dashboard')); // same as above 
    }, 1000); 
    $('.dashboard-report-range span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY')); 

}); 

$('.dashboard-report-range').show(); 

$('.dashboard-report-range').on('apply.daterangepicker', function(ev, picker) { 

    console.log(picker.parentEl); 

    // ajax request 
    $.ajax({ 
     ... 
    }); 
}); 

HTML

<!-- BEGIN PORTLET--> 
<div id="portlet_test" class="portlet solid bordered light-grey"> 
    <div class="portlet-title"> 
     <div class="caption full-width"> 
      <small> 
       <div class="dashboard-report-range pull-right dashboard-date-range tooltips no-tooltip-on-touch-device responsive" data-tablet="" data-desktop="tooltips" data-placement="top" data-original-title="Change report date range"> 
        <i class="icon-calendar"></i> 
        <span><%= 1.week.ago.strftime('%B %-d, %Y').to_s %> - <%= Time.now.strftime('%B %-d, %Y').to_s %></span> 
        <i class="icon-angle-down"></i> 
       </div> 
      </small> 
     </div> 
    </div> 
</div> 
<!-- END PORTLET-->  

DateRangePicker文档：https://github.com/dangrossman/bootstrap-daterangepicker

控制台告诉我e父元素是body，这是它未设置时的默认值，因此我设置的方式不对parentEl。

硬编码parentEl任何选择给出了这样的错误：

Uncaught TypeError: Cannot read property 'createDocumentFragment' of undefined我相信这是引导和jQuery之间有些冲突。

我不一定需要使用parentEl，我只是在寻找一种方法来区分使用哪个选择器（页面上会有多个选择器）。

如果这意味着将id或data属性的任何元素那么这就是罚款的目的只是为了让我通过AJAX所选择的日期传递到正确的URL，这样，整点是要找出哪个URL应该是用过的。

Answer 1

答案原来是相当直接的，在apply事件时，可以执行以下操作来获取被解雇选择器的ID：

$('.dashboard-report-range').on('apply.daterangepicker', function(ev, picker) { 

    $(this).find('span').html(picker.startDate.format('MMMM D, YYYY') + ' - ' + picker.endDate.format('MMMM D, YYYY')); // set text of span of fired picker instead of it being done for all inside the callback 
    var id = $(this).attr('id'); 
    // anything else you want to do 
}); 

此前，跨度案文进行设置在回调如此：

, 
function (start, end) { 
    $('.dashboard-report-range span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY')); 
} 

但只是评论，线路输出。