带日期范围的引导日期选择器结束/开始日期限制

Question

我正在使用Bootstrap Datepicker，我有2个input字段（开始日期和结束日期），使用日期范围选项（inputs:）非常有效。我试图让起始字段要求选择一个过去今天的日期（所以只有今天的日期或过去的日期）。

这是我正在使用的jQuery：

  $('.input-daterange').datepicker({
    format: 'mm-dd-yyyy',
    inputs: $('.date-control'),
    todayBtn: true,
    todayHighlight: true
  });

以下是表单字段：

    <div class="col-md-6 mb-3">
      <label for="date-start"><span class="text-danger">*</span>Project Start Date</label>
      <div class="input-group input-daterange">
        <div class="input-group-prepend">
          <span class="input-group-text">Started</span>
        </div>
        <input type="text" class="form-control date-control start-daterange" name="date-start" id="date-start" value="" required="">
        <div class="invalid-feedback">
          Project Start Date is required.
        </div>
      </div>
    </div>
    <div class="col-md-6 mb-3">
      <label for="date-end"><span class="text-danger">*</span>Project End Date</label>
      <div class="input-group input-daterange end-daterange">
        <div class="input-group-prepend">
          <span class="input-group-text">Finished</span>
        </div>
        <input type="text" class="form-control date-control" name="date-end" id="date-end" value="" required="">
        <div class="invalid-feedback">
          Project End Date is required.
        </div>
      </div>
    </div>

我已经尝试使用endDate: "0d";来限制开始日期字段，但如果我这样做，它也会限制结束日期字段，因为它们与inputs: $('.date-control')相关联。我saw in the documents，我可以使用<input type="text" class="form-control" data-date-end-date="0d">，但这也不起作用，也许是因为我使用inputs选项？

所以我的问题是有一个简单的方法来继续使用日期范围选项，并能够限制开始日期字段选择今天的日期和过去的任何日期？

我已经看过这些其他半相关的SO问题how to restrict bootstrap date picker from future date和How to have a dynamic maximum end date in Bootstrap Date Picker。另外我使用的是最新版本的bootstrap datepicker（v1.8）。

Answer 1

似乎输入选项和data-date-end-date属性不能很好地协同工作。但是有一个解决方法，你会得到相同的结果。您可以对两个输入使用相同的类，并且可以使用该类创建日期选择器。除此之外，您将在开始输入中使用data-date-end-date属性，如下所示：

Jquery代码：

$('.date-control').datepicker({
  format: 'mm-dd-yyyy',
  todayBtn: true,
  todayHighlight: true
});

表单字段：

<div class="col-md-6 mb-3">
  <label for="date-start"><span class="text-danger">*</span>Project Start Date</label>
  <div class="input-group input-daterange">
    <div class="input-group-prepend">
      <span class="input-group-text">Started</span>
    </div>
    <input type="text" class="form-control date-control start-daterange" name="date-start" id="date-start" required="" data-date-end-date="0d">
    <div class="invalid-feedback">
      Project Start Date is required.
    </div>
  </div>
</div>
<div class="col-md-6 mb-3">
  <label for="date-end"><span class="text-danger">*</span>Project End Date</label>
  <div class="input-group input-daterange end-daterange">
    <div class="input-group-prepend">
      <span class="input-group-text">Finished</span>
    </div>
    <input type="text" class="form-control date-control" name="date-end" id="date-end" required="">
    <div class="invalid-feedback">
      Project End Date is required.
    </div>
  </div>
</div>

ps：我已从两个输入中删除了value属性，只是为了清楚。