title: applying datepicker to multiple instances of the same webpage
body: <p>I am using angular bootstrap date range picker. In a single page i need to use it in multiple places with each date picker having its own minimum and maximum date range enabled. Please find the code demo <a href="http://plnkr.co/edit/ypgBGi10vVPe89Nq6rP7?p=preview" rel="nofollow noreferrer">here</a> </p>
  
  <p>js code:</p>
  
  <pre><code>var cb = function(start, end, label) {
      console.log(start.toISOString(), end.toISOString(), label);
      $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
      console.log("Callback has fired: [" + start.format('MMMM D, YYYY') + " to " + end.format('MMMM D, YYYY') + ", label = " + label + "]");
  }
  
  var optionSet1 = {
      startDate: moment().subtract(1, 'days'),
      endDate: moment().subtract(1, 'days'),
      minDate: '08/01/2014',
      maxDate: '12/31/2017',
      dateLimit: {
          days: 60
      },
      showDropdowns: true,
      showWeekNumbers: true,
      timePicker: false,
      timePickerIncrement: 1,
      timePicker12Hour: true,
      ranges: {
          'Today': [moment(), moment()],
          'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
          'Last 7 Days': [moment().subtract(6, 'days'), moment()],
          'Last 30 Days': [moment().subtract(29, 'days'), moment()],
          'This Month': [moment().startOf('month'), moment().endOf('month')],
          'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
      },
      opens: 'left',
      buttonClasses: ['btn btn-default'],
      applyClass: 'btn-small btn-primary',
      cancelClass: 'btn-small',
      format: 'MM/DD/YYYY',
      separator: ' to ',
      locale: {
          applyLabel: 'Submit',
          cancelLabel: 'Clear',
          fromLabel: 'From',
          toLabel: 'To',
          customRangeLabel: 'Custom',
          daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
          monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
          firstDay: 1
      }
  };
  
  $('#reportrange span').html(moment().subtract(1, 'days').format('MMMM D, YYYY') + ' - ' + moment().subtract(1, 'days').format('MMMM D, YYYY'));
  
  $('#reportrange').daterangepicker(optionSet1, cb);
  
  $('#reportrange').on('show.daterangepicker', function() {
      console.log("show event fired");
  });
  $('#reportrange').on('hide.daterangepicker', function() {
      console.log("hide event fired");
  });
  $('#reportrange').on('apply.daterangepicker', function(ev, picker) {
      console.log("apply event fired, start/end dates are " + picker.startDate.format('MMMM D, YYYY') + " to " + picker.endDate.format('MMMM D, YYYY'));
  });
  $('#reportrange').on('cancel.daterangepicker', function(ev, picker) {
      console.log("cancel event fired");
  });
  </code></pre>
  
  <p>html code:</p>
  
  <pre><code>Select SIM Date Range : &lt;input id="reportrange" class="simDateRange"&gt;
  &lt;br&gt;&lt;br&gt;&lt;br&gt;
  
  Select Phone Date Range: &lt;input id="reportrange" class="phoneDateRange"&gt;
  </code></pre>
  
  <p>I want to reuse the same js code to show daterange picker in multiple places of my webpage and i need to set minimum and maximum date range for each date range.Any suggestions would be helpful.</p>