动态调整 bootstrap 日期选择器的日期范围

Question

我需要帮助根据在下拉列表中选择的数据值动态调整日期选择器的日期范围。我已经尝试使用下面编写的代码，但它没有用。

我使用 bootstrap、jquery 和 bootstrap 日期选择器。

这是我的代码

<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

能否请您稍微修改一下 HTML 以形成 <option>，例如：

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

这里 date_start 和 date_end 位于两个不同的属性中，因此很容易抓住它：

$(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>

动态调整 bootstrap 日期选择器的日期范围

adjust date range of bootstrap datepicker dynamically

javascript

php

jquery

bootstrap-datepicker