title: Calling noConflict() after initialising bootstrap datepicker?
body: <p>I am trying to use <code>noConflict()</code> with bootstrap datepicker to avoid conflict with other jquery plugins. </p>
  
  <p>The bootstrap datepicker docs say: </p>
  
  <pre><code>$.fn.datepicker.noConflict provides a way to avoid conflict with other jQuery datepicker plugins:
  
  var datepicker = $.fn.datepicker.noConflict(); // return $.fn.datepicker to previously assigned value
  $.fn.bootstrapDP = datepicker;                 // give $().bootstrapDP the bootstrap-datepicker functionality
  </code></pre>
  
  <p>But that didn't work for me, because I was using it with a date range.  The code's author had <a href="https://github.com/eternicode/bootstrap-datepicker/issues/736" rel="nofollow">this to say</a>: </p>
  
  <blockquote>
    <p>Oops! The date range code, itself, calls .datepicker, so you're right,
    it's broken when coupled with noConflict.</p>
    
    <p>For now, I suggest calling noConflict <strong><em>after</em></strong> initializing the range
    picker.</p>
  </blockquote>
  
  <p>But how do I do that?</p>
  
  <p>I tried this: </p>
  
  <pre><code>$('#bookingform .input-daterange').datepicker({
      ...options excluded for brevity...
  });
  datepicker = $.fn.datepicker.noConflict();  
  </code></pre>
  
  <p>And I've tried this: </p>
  
  <pre><code>$('#bookingform .input-daterange').datepicker({
      ...options excluded for brevity...
  }).noConflict();
  </code></pre>
  
  <p>But I can't seem to get it to work.  Can anybody enlighten me as to what I'm doing wrong (or preferably how I can do it right)?  </p>
  
  <p><strong>Update: For those asking how I initialize a range picker:</strong></p>
  
  <p>There doesn't appear to be code calling this specifically. Other than the demo code below, it relies on the bootstrap js.  I think the range aspect might be based on the class <code>.input-daterange</code> but I'm not sure.  </p>
  
  <p>This is the demo code: </p>
  
  <pre><code>&lt;div class="input-daterange input-group" id="datepicker"&gt;
      &lt;input type="text" class="input-sm form-control" name="start" /&gt;
      &lt;span class="input-group-addon"&gt;to&lt;/span&gt;
      &lt;input type="text" class="input-sm form-control" name="end" /&gt;
  &lt;/div&gt;
  
  $('#sandbox-container .input-daterange').datepicker({
      format: "dd/mm/yyyy"
  });
  </code></pre>