title: adjust date range of bootstrap datepicker dynamically
body: <p>I need help to adjust date range of date picker dynamically based on data-value selected on dropdown list. I've tried with code i written below but it just didnt work.</p>
  
  <p>I use bootstrap, jquery, and bootstrap datepicker.</p>
  
  <p>Here is my code</p>
  
  <pre><code>&lt;link rel="stylesheet" href="&lt;?php echo base_url(); ?&gt;plug/bootstrap.min.css"/&gt;
  &lt;link rel="stylesheet" href="&lt;?php echo base_url(); ?&gt;plug/bootstrap-datepicker3.min.css"/&gt;
  &lt;script src="&lt;?php echo base_url(); ?&gt;plug/jquery-3.1.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="&lt;?php echo base_url(); ?&gt;plug/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script src="&lt;?php echo base_url(); ?&gt;plug/bootstrap-datepicker.min.js"&gt;&lt;/script&gt;
  
  &lt;?php
  $data[0] = array("id"=&gt;"2", "name" =&gt; "Anton", "date_start" =&gt; "2016-10-04", "date_end" =&gt; "2016-10-14");
  $data[1] = array("id"=&gt;"4", "name" =&gt; "Boby", "date_start" =&gt; "2016-10-09", "date_end" =&gt; "2016-10-29");
  $data[2] = array("id"=&gt;"5", "name" =&gt; "Ciara", "date_start" =&gt; "2016-10-01", "date_end" =&gt; "2016-10-31");
  $data[3] = array("id"=&gt;"6", "name" =&gt; "Don", "date_start" =&gt; "2016-10-05", "date_end" =&gt; "2016-12-31");
  $data[4] = array("id"=&gt;"7", "name" =&gt; "Ester", "date_start" =&gt; "2016-10-01", "date_end" =&gt; "2016-12-31");
  ?&gt;
  
  &lt;section class="content"&gt;
      &lt;div class="box box-primary"&gt;
          &lt;div class="box-body"&gt;
              &lt;form class="form-horizontal mt-20" method="post" action="action/input"&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label class="col-sm-3 control-label"&gt;Name&lt;/label&gt;
                      &lt;div class="col-sm-5"&gt;
                          &lt;select name="date" class="form-control select2" id="date" data-placeholder="" style="width: 100%;"&gt;
                              &lt;option disabled selected&gt;Select name&lt;/option&gt;
                              &lt;?php
                              foreach ($data as $r) {
                                  echo "&lt;option value='$r[id]' data-value=\"{'date_start'='$r[date_start]', 'date_end'='$r[date_end]'}\"&gt;$r[name]&lt;/option&gt;";
                              }
                              ?&gt;
                          &lt;/select&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label class="col-sm-3 control-label"&gt;Start Date&lt;/label&gt;
                      &lt;div class="col-sm-5"&gt;
                          &lt;div class="input-group date"&gt;
                              &lt;div class="input-group-addon"&gt;
                                  &lt;i class="fa fa-calendar"&gt;&lt;/i&gt;
                              &lt;/div&gt;
                              &lt;input id="start_date" name="start_date" type="text" class="form-control pull-right"&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label class="col-sm-3 control-label"&gt;End Date&lt;/label&gt;
                      &lt;div class="col-sm-5"&gt;
                          &lt;div class="input-group date"&gt;
                              &lt;div class="input-group-addon"&gt;
                                  &lt;i class="fa fa-calendar"&gt;&lt;/i&gt;
                              &lt;/div&gt;
                              &lt;input id="end_date" name="end_date" type="text" class="form-control pull-right"&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="box-footer col-md-offset-3"&gt;
              &lt;button type="submit" class="btn btn-success mr-10"&gt;Save&lt;/button&gt;
              &lt;button type="button" class="btn btn-primary" onclick="history.go(-1)"&gt;Cancel&lt;/button&gt;
          &lt;/div&gt;
  
          &lt;/form&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  &lt;script type="text/javascript"&gt;
      $(document).ready(function () {
          $('#date').change(function () {
              var start = $(this).find(":selected").data("value").start_date;
              var end = $(this).find(":selected").data("value").end_date;
  
              $('.input-group.date').datepicker({
                  format: "yyyy-mm-dd",
                  startDate: start,
                  endDate: end,
                  autoclose: true
              });
          });
      });
  &lt;/script&gt;
  </code></pre>