ブートストラップ日付ピッカーの日付範囲を動的に調整する

Question

ドロップダウンリストで選択したデータ値に基づいて、日付選択ツールの日付範囲を動的に調整するのに役立つ必要があります。私は下に書かれたコードで試しましたが、それはちょうど仕事をしませんでした。

私は、ブートストラップ、jquery、およびブートストラップdatepickerを使用します。

<option value='2' data-date_start="2016-10-04" data-date_end="2016-10-14">Anton</option> 

ここdate_startとdate_endは、2つの異なる属性に座っているので、簡単にそれをつかむために：ここで

は

<link rel="stylesheet" href="<?php echo base_url(); ?>plug/bootstrap.min.css"/> 
<link rel="stylesheet" href="<?php echo base_url(); ?>plug/bootstrap-datepicker3.min.css"/> 
<script src="<?php echo base_url(); ?>plug/jquery-3.1.1.min.js"></script> 
<script src="<?php echo base_url(); ?>plug/bootstrap.min.js"></script> 
<script src="<?php echo base_url(); ?>plug/bootstrap-datepicker.min.js"></script> 

<?php 
$data[0] = array("id"=>"2", "name" => "Anton", "date_start" => "2016-10-04", "date_end" => "2016-10-14"); 
$data[1] = array("id"=>"4", "name" => "Boby", "date_start" => "2016-10-09", "date_end" => "2016-10-29"); 
$data[2] = array("id"=>"5", "name" => "Ciara", "date_start" => "2016-10-01", "date_end" => "2016-10-31"); 
$data[3] = array("id"=>"6", "name" => "Don", "date_start" => "2016-10-05", "date_end" => "2016-12-31"); 
$data[4] = array("id"=>"7", "name" => "Ester", "date_start" => "2016-10-01", "date_end" => "2016-12-31"); 
?> 

<section class="content"> 
    <div class="box box-primary"> 
     <div class="box-body"> 
      <form class="form-horizontal mt-20" method="post" action="action/input"> 
       <div class="form-group"> 
        <label class="col-sm-3 control-label">Name</label> 
        <div class="col-sm-5"> 
         <select name="date" class="form-control select2" id="date" data-placeholder="" style="width: 100%;"> 
          <option disabled selected>Select name</option> 
          <?php 
          foreach ($data as $r) { 
           echo "<option value='$r[id]' data-value=\"{'date_start'='$r[date_start]', 'date_end'='$r[date_end]'}\">$r[name]</option>"; 
          } 
          ?> 
         </select> 
        </div> 
       </div> 
       <div class="form-group"> 
        <label class="col-sm-3 control-label">Start Date</label> 
        <div class="col-sm-5"> 
         <div class="input-group date"> 
          <div class="input-group-addon"> 
           <i class="fa fa-calendar"></i> 
          </div> 
          <input id="start_date" name="start_date" type="text" class="form-control pull-right"> 
         </div> 
        </div> 
       </div> 
       <div class="form-group"> 
        <label class="col-sm-3 control-label">End Date</label> 
        <div class="col-sm-5"> 
         <div class="input-group date"> 
          <div class="input-group-addon"> 
           <i class="fa fa-calendar"></i> 
          </div> 
          <input id="end_date" name="end_date" type="text" class="form-control pull-right"> 
         </div> 
        </div> 
       </div> 
     </div> 

     <div class="box-footer col-md-offset-3"> 
      <button type="submit" class="btn btn-success mr-10">Save</button> 
      <button type="button" class="btn btn-primary" onclick="history.go(-1)">Cancel</button> 
     </div> 

     </form> 
    </div> 
</section> 
<script type="text/javascript"> 
    $(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 
      }); 
     }); 
    }); 
</script> 

Answer 1

はあなたのような<option>を形成するために、あなたのHTMLを少し変更してくださいでした私のコードです：

$(document).ready(function() { 
 
    var start = null; 
 
    var end = null; 
 
    $('#date').change(function() { 
 

 
    start = $(this).find(":selected").data("date_start"); 
 
    end = $(this).find(":selected").data("date_end"); 
 
    $('.input-group.date').datepicker("remove"); //clearing the previos options and again initiating datepicker 
 
    initDatePicker(); 
 
    }); 
 

 
    function initDatePicker() { 
 
    $('.input-group.date').datepicker({ 
 
     format: "yyyy-mm-dd", 
 
     startDate: new Date(start), 
 
     endDate: new Date(end), 
 
     autoclose: false 
 
    }); 
 
    } 
 

 
});

<link href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker3.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> 
 

 
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script> 
 

 
<section class="content"> 
 
    <div class="box box-primary"> 
 
    <div class="box-body"> 
 
     <form class="form-horizontal mt-20" method="post" action="action/input"> 
 
     <div class="form-group"> 
 
      <label class="col-sm-3 control-label">Name</label> 
 
      <div class="col-sm-5"> 
 
      <select name="date" class="form-control select2" id="date" data-placeholder="" style="width: 100%;"> 
 
       <option disabled selected>Select name</option> 
 
       <option value='2' data-date_start="2016-10-04" data-date_end="2016-10-14">Anton</option> 
 
       <option value='4' data-date_start="2016-10-09" data-date_end="2016-10-29">Boby</option> 
 
       <option value='5' data-date_start="2016-10-01" data-date_end="2016-10-31">Ciara</option> 
 
       <option value='6' data-date_start="2016-10-05" data-date_end="2016-10-22">Don</option> 
 
       <option value='7' data-date_start="2016-10-01" data-date_end="2016-10-17">Ester</option> 
 
      </select> 
 
      </div> 
 
     </div> 
 
     <div class="form-group"> 
 
      <label class="col-sm-3 control-label">Start Date</label> 
 
      <div class="col-sm-5"> 
 
      <div class="input-group date"> 
 
       <div class="input-group-addon"> 
 
       <i class="fa fa-calendar"></i> 
 
       </div> 
 
       <input id="start_date" name="start_date" type="text" class="form-control pull-right"> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="form-group"> 
 
      <label class="col-sm-3 control-label">End Date</label> 
 
      <div class="col-sm-5"> 
 
      <div class="input-group date"> 
 
       <div class="input-group-addon"> 
 
       <i class="fa fa-calendar"></i> 
 
       </div> 
 
       <input id="end_date" name="end_date" type="text" class="form-control pull-right"> 
 
      </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="box-footer col-md-offset-3"> 
 
     <button type="submit" class="btn btn-success mr-10">Save</button> 
 
     <button type="button" class="btn btn-primary" onclick="history.go(-1)">Cancel</button> 
 
    </div> 
 

 
    </form> 
 
    </div> 
 
</section>