我正在使用 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
我认为这是引导程序和 jQuery 之间的一些冲突。
我不一定需要使用parentEl
,我只是在寻找一种方法来区分使用了哪个选择器(页面上会有多个)。
如果这意味着向任何元素添加id
或data
属性,那很好,因为目的只是让我通过 ajax 将选定的日期传递给正确的 url,所以重点是找出应该使用哪个 url。