jQuery DateRangePicker - 知道哪个插件实例已被触发

Question

我正在使用 DateRangePicker 引导插件并尝试动态设置 parentEl 选项：

$('.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

控制台告诉我父元素是 body，这是它未设置时的默认值，所以我设置 parentEl 的方式有问题。

将parentEl 硬编码到任何选择器都会出现此错误：

Uncaught TypeError: Cannot read property 'createDocumentFragment' of undefined 我认为这是 bootstrap 和 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'));
}

但只需注释掉该行。