javascript - Bootstrap日期选择器: Ensuring EndDate > StartDate as well as having a max start date

Question

如果我的标题有些蹩脚，我深表歉意。我还应该首先提到这是一个 MVC 应用程序(如果这很重要的话)。

这就是我正在尝试做的事情。我希望我的日期选择器具有以下要求:

• 开始日期的范围必须是今天 - 45 天前
• 结束日期不得超过今天
• 结束日期必须晚于开始日期

这是我迄今为止所尝试过的，并且已经使前 2 个子弹起作用:

HTML

<div class="col-md-6 row">
    <div class="form-group">
      <label for="StartDate">Start Date</label>
      <input  type="text" id="StartDate" class="form-control" data-provide="datepicker" data-date-start-date="-45d" data-date-end-date="0d">
      <label for="EndDate">End Date </label>
      <input  type="text" id="EndDate" class="form-control" data-provide="datepicker" data-date-start-date="-45d" data-date-end-date="0d">
      </div>
  </div>

Javascript:

<script type="text/javascript">
$(document).ready(function () {
  $("#StartDate").datepicker({
    dateFormat: 'mm/dd/yyyy',
    onSelect: function (selected) {
      $("#EndDate").datepicker("option", "minDate", selected)
    }
  });
  $("#EndDate").datepicker({
    dateFormat: 'mm/dd/yyyy',
    onSelect: function (selected) {
      $("#StartDate").datepicker("option", "maxDate", selected)
    }
  });

我还尝试删除 HTML 中的一些数据属性，并将它们添加到 javascript 中的日期选择器方法中，但无济于事。

我也尝试使用以下问题的解决方案，但无济于事:

• how to compare two datepicker date jquery
• Twitter Bootstrap datepicker: how to enable only specific daterange

我发现的大多数示例似乎都使用 JQuery UI 1.9.2。我只使用 JQuery 1.9.1，而不使用 UI。这有什么区别吗？

我是 javascript 和所有其他网络内容的新手，所以我确信我错过了一些非常简单的东西，但感谢您的帮助。

Answer 1

好吧，看来我找到了自己的答案。

原来我使用了两个不同插件的组合..哎呀。因此，如果其他人在始终验证开始日期 < 结束日期以及限制初始开始和结束日期方面遇到问题，这就是我能够完成的工作。

$("#StartDate").datepicker({
    autoclose: true,
  }).on('changeDate', function (selected) {
    var minDate = new Date(selected.date.valueOf());
    $('#EndDate').datepicker('setStartDate', minDate);
  });

  $("#EndDate").datepicker({
    autoclose: true
  }).on('changeDate', function (selected) {
    var minDate = new Date(selected.date.valueOf());
    $('#StartDate').datepicker('setEndDate', minDate);
  });