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，这是它未设置的默认值，因此我设置{{1}的方式不正确}。

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

parentEl我相信bootstrap和jQuery之间存在冲突。

我不一定需要使用Uncaught TypeError: Cannot read property 'createDocumentFragment' of undefined，我只是想找到一种方法来区分使用哪个选择器（页面上会有多个选择器）。

如果这意味着向任何元素添加parentEl或id属性，那么这很好，因为目的只是允许我通过ajax将所选日期传递给正确的网址，所以，重点是要找出应该使用哪个网址。

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

但只是评论该行。

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

1 个答案: