jQuery datepicker - 在第一个禁用日期

Question

我正在创建一个预订系统，我正在使用jQuery的datepicker来允许用户选择预订的开始和结束日期。

我的第一个要求是用户不能选择过去的日期。我已经使用min date选项解决了这个问题。

然后，我使用onSelect选项禁用了'end_date'中位于'start_date'之前的所有日期。

接下来，我已经通过使用ajax来检索已经预订的所有日期，以检索返回已经预订的所有日期的网址，然后使用beforeShowDay选项禁用它们。 / p>

现在，我想要做的是在第一个禁用日期之后禁用所有日期。

在附图中，您将看到已选择第15个作为开始日期。 20日至24日和27日至30日已经预订。

因为用户无法从15日至25日预订。我想禁用19日之后的所有日期，以便用户只能预订同时运行的日期。

我在下面提供了我的代码。任何帮助深表感谢。感谢。

var bookedDates;
var dateToday = new Date();
$.ajax({
  type: "GET",
  url: "/panels/" + this.value + "/bookings",
  success: function(data) {
    bookedDates = JSON.stringify(data);
    $('#start_date').datepicker('destroy');
    $('#end_date').datepicker('destroy');
    $('#start_date').datepicker({
      minDate: dateToday,
      beforeShowDay: function(date) {
        var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
        return [bookedDates.indexOf(string) == -1]
      },
      onSelect: function(date) {
        $('#end_date').removeAttr('disabled');
        var selectedDate = new Date(date);
        var msecsInADay = 86400000;
        var endDate = new Date(selectedDate.getTime() + msecsInADay);
        //Set Minimum Date of EndDatePicker After Selected Date of StartDatePicker
        $('#end_date').datepicker('option', 'minDate', endDate);
        $('#end_date').datepicker('option', 'maxDate', '+2y');
      }
    });

    $('#end_date').datepicker({
      beforeShowDay: function(date) {
        var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
        return [bookedDates.indexOf(string) == -1]
      }
    });

  },
  error: function(jqXHR, textStatus, errorThrown) {
    $('#start_date').datepicker('destroy');
    $('#end_date').datepicker('destroy');
    $('#start_date').datepicker({
      minDate: dateToday,
      onSelect: function(date) {
        $('#end_date').removeAttr('disabled');
        var selectedDate = new Date(date);
        var msecsInADay = 86400000;
        var endDate = new Date(selectedDate.getTime() + msecsInADay);
        //Set Minimum Date of EndDatePicker After Selected Date of StartDatePicker
        $('#end_date').datepicker('option', 'minDate', endDate);
        $('#end_date').datepicker('option', 'maxDate', '+2y');
      }
    });
    $('#end_date').datepicker({});
  },
  dataType: "json"
});