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选项？

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

我已经查看了how to restrict bootstrap date picker from future date和How to have a dynamic maximum end date in Bootstrap Date Picker这些其他半相关的SO问题。另外，我正在使用最新版本的引导日期选择器（v1.8）。

Answer 1

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

Jquery代码：

onScroll = e => {
    let finish = e.target.scrollTop + e.target.offsetHeight || 0;
    let height = this.stockRef.current.offsetHeight * 0.4;

    const {
      stock: { page, tag },
      getStock
    } = this.props;

    if (finish >= height && page <= 4) {
      getStock(tag, page);
    }
  };

表单字段：

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

ps：为了清楚起见，我从两个输入中都删除了value属性。

具有日期范围的Bootstrap日期选择器的结束/开始日期限制

1 个答案: