title: How to make datepicker-bootstrap input range inline?
body: <p>Trying to show both calendar next to each other inline and not popping up on click on the input. <a href="http://bootstrap-datepicker.readthedocs.io/en/latest/markup.html#date-range" rel="nofollow noreferrer">Using bootstrap slider</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('.input-daterange input').each(function() {
    $(this).datepicker({
      format: "yyyy",
      viewMode: "years", 
      minViewMode: "years",
      updateViewDate: false
    });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css" rel="stylesheet" type="text/css" media="screen"&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"&gt;&lt;/script&gt;
  
   &lt;div class="input-group input-daterange"&gt;
     &lt;input type="text" class="form-control" value="2012-04-05"&gt;
     &lt;div class="input-group-addon"&gt;to&lt;/div&gt;
     &lt;input type="text" class="form-control" value="2012-04-19"&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is how I use the inline with a single calendar but I can't manage to make it for date range and two calendars:</p>
  
  <pre><code>&lt;div id="sandbox-container"&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;
  
  $('#sandbox-container div').datepicker({
    format: "yyyy",
    viewMode: "years", 
    minViewMode: "years",
    updateViewDate: false
  });
  </code></pre>
  
  <p>I tried the following but it place three calendars, the first div with 2 one next to each other and the second div with only one calendar</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('.input-daterange div').each(function() {
    $(this).datepicker({
      format: "yyyy",
      viewMode: "years", 
      minViewMode: "years",
      updateViewDate: false
    });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css" rel="stylesheet" type="text/css" media="screen"&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"&gt;&lt;/script&gt;
  
    &lt;div class="input-group input-daterange"&gt;
      &lt;div&gt;&lt;/div&gt;
      &lt;div&gt;&lt;/div&gt;
      &lt;input type="hidden" class="form-control" value="2012-04-05"&gt;
      &lt;div class="input-group-addon"&gt;to&lt;/div&gt;
      &lt;input type="hidden" class="form-control" value="2012-04-19"&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>