title: jQuery DateRangePicker - know which instance of the plugin has been fired
body: <p>I am using the DateRangePicker bootstrap plugin and trying to set the <code>parentEl</code> option dynamically as so:</p>
  
  <pre><code>$('.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({
          ...
      });
  });  
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;!-- BEGIN PORTLET--&gt;
  &lt;div id="portlet_test" class="portlet solid bordered light-grey"&gt;
      &lt;div class="portlet-title"&gt;
          &lt;div class="caption full-width"&gt;
              &lt;small&gt;
                  &lt;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"&gt;
                      &lt;i class="icon-calendar"&gt;&lt;/i&gt;
                      &lt;span&gt;&lt;%= 1.week.ago.strftime('%B %-d, %Y').to_s %&gt; - &lt;%= Time.now.strftime('%B %-d, %Y').to_s %&gt;&lt;/span&gt;
                      &lt;i class="icon-angle-down"&gt;&lt;/i&gt;
                  &lt;/div&gt;
              &lt;/small&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- END PORTLET--&gt;     
  </code></pre>
  
  <p>DateRangePicker Documentation: <a href="https://github.com/dangrossman/bootstrap-daterangepicker" rel="nofollow">https://github.com/dangrossman/bootstrap-daterangepicker</a></p>
  
  <p>The console is telling me the parent element is <code>body</code> which is what it defaults to when it's not set so there's something not right about the way I am setting <code>parentEl</code>.</p>
  
  <p>Hardcoding the <code>parentEl</code> to any selector gives this error:</p>
  
  <p><code>Uncaught TypeError: Cannot read property 'createDocumentFragment' of undefined</code> which I believe is some conflict between bootstrap and jQuery.</p>
  
  <p>I don't necessarily need to use the <code>parentEl</code>, I am just looking for a way to distinguish which picker was used (there's going to be more than one on the page).</p>
  
  <p>If this means adding <code>id</code> or <code>data</code> attributes to any elements then that's fine as the purpose is just to allow me to pass the selected dates to the correct url via ajax so, the whole point is to find out which url should be used.</p>