title: Bootstrap datepicker dropdown as 100% of input
body: <p>I am currently working on a project where I am in need of a calendar that will be 100% of the HTML input that it is based on. I know that you can resize the calendar based on pixels with the following </p>
  
  <pre><code> .datepicker {
     /*This has to be 100% of the width of the textinput*/
     width: "n"px;
   }
  
   .table-condensed {
     width: 100%;
   }
  </code></pre>
  
  <p>Based on HTML that looks as following</p>
  
  <pre><code> &lt;div class = "input-group date" id='datepicker'&gt;
        &lt;span class = "input-group-addon"&gt;&lt;i class = "fa fa-calendar"&gt;&lt;/i&gt;&lt;/span&gt;
        &lt;input class = "form-control" type="text" name="date" id = "date" placeholder="DD/MM-ÅÅÅÅ"
        &lt;?php 
        if(isset($_SESSION['searchDate'])){
          $displaySearch = $_SESSION['searchDate'];
          unset($_SESSION['$searchDate']);
        }
        ?&gt;
        value = "&lt;?php echo $displaySearch;?&gt;"&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>I have searched all over the internet without finding an answer. Note that there is jQuery to initialize the datepicker </p>
  
  <pre><code>$(document).ready(function() {
    $("#datepicker").datepicker({
      format: "dd/mm-yyyy",
      autoclose: true,
      todayHighlight: true,
      clearBtn: true,
      orientation: "top",
      language: 'sv',
      weekStart: 1,
    });
  });
  </code></pre>
  
  <p>My assumption is that in some way need to have the input surrounded in some div where I then have the input as 100% of the div but that does not work for me. Anyone of you people encountered this problem before and found a legitimate solution?</p>