在 select startDate 之后约束 endDate

Question

我需要帮助来添加 endDate (date_end) 将始终在 startDate (date_start) 之后的约束。

因此，如果我为 date_start 选择了 2016-10-31，那么 2016-10-31 之前的日期将在 end_date 输入中被禁用。

这是我的代码：

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

js:

$(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
    });
  }

});

Answer 1

您可以为 onchange to the startDate and endDate pickers, with the setter method 添加事件处理程序。请参阅下面的示例。

Additions/modifications:

修改日期组 div 使其具有 id 属性：

<div class="input-group date" id="start_date_group">

2.Register 每个日期选择器的 changeDate 回调函数 - 例如：

$("#start_date_group").on("changeDate", function(e) { $('#end_date_group').datepicker('setStartDate',e.date); }); $("#end_date_group").on("changeDate", function(e) { $('#start_date_group').datepicker('setEndDate',e.date); });
1. 还有一个 </div> 标记在您的 html 中不合适 - 我将它从 endDate 组之后移到了表单的结束标记之后。

$(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
    });
    //when the Start date changes, set the startDate on the End Date field
    $("#start_date_group").on("changeDate", function(e) {
      $('#end_date_group').datepicker('setStartDate',e.date);
    });
    //when the End date changes, set the endDate on the Start Date field
    $("#end_date_group").on("changeDate", function(e) {
      $('#start_date_group').datepicker('setEndDate',e.date);
    });
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/latest/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="https://uxsolutions.github.io/bootstrap-datepicker/bootstrap-datepicker/css/bootstrap-datepicker3.min.css" />
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
<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">
            <!-- add id attribute to the group here -->
            <div class="input-group date" id="start_date_group">
              <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">                
            <!-- add id attribute to the group here -->
            <div class="input-group date" id="end_date_group">
              <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> move this closing tag down after the closing form tag -->
        <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>
  </div> <!-- <-- move this closing div tag down here instead of after the endDategroup <div>-->
</section>

在 select startDate 之后约束 endDate

Constraint endDate after select startDate

html

javascript

jquery

jquery-ui-datepicker

bootstrap-datepicker