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

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

inputs 选项和 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 属性。