防止选择包含不可用时间跨度的时间跨度答案

【问题标题】：Prevent selection of time spans containing unavailable time spans防止选择包含不可用时间跨度的时间跨度
【发布时间】：2017-10-11 17:12:40
【问题描述】：

我目前正在为我的一个朋友开发一个度假公寓网站。我遇到了一个问题，不知道如何解决。我正在使用一个名为bootstrap-daterangepicker 或只是daterangepicker 的插件。问题是：

我想阻止用户选择包含不可用日期的时间跨度，这意味着如果其他人已经预订并因此无法选择时间跨度，则不应选择“1 月 4 日至 20 日”的时间跨度（例如“1 月 7 日 - 11 日”）在前面提到的一个内。因此，如果用户选择一个日期，则必须找出数组“不可用”提供的下一个禁用日期的安排时间，并禁用该日期之后的所有日期的选择，因此类似于 maxDate 选项（在我的示例中为所有日期从现在起一年和一个月后无法再选择）。

我使用 isInvalidDate 选项禁用特定日期的选择：

var unavailable = [
  '10.06.2017',
  '11.06.2017',
  '12.06.2017',
  '13.06.2017',
  '14.06.2017',
]

$('input[name="datefilter"]').daterangepicker({
    maxDate: moment().add({
      years:1,
      months:1
    }),
    locale: {
        format: 'DD.MM.YYYY'
    },
    isInvalidDate: function(date)
    {
      return !!(unavailable.indexOf(date.format('DD.MM.YYYY')) > -1);
    }
});

【问题讨论】：

那么什么不适合你？
不知道daterangepicker.js中选择的日期的变量是什么，以及如何使用这个变量和数组找出下一个不可用的日期是什么...跨度>
剩下的只是将类“关闭”和“禁用”到第一个不可用的日期之后的日期，这应该很容易......@Sag1v
在阅读了他们的文档（并在源代码中快速搜索）后，我没有找到任何本机解决方案来挂钩 onSelect 或 onChange 方法。您可以尝试找出一种方法来挂钩生成的“daterangepicker_start”input 的change 事件，但是当您考虑其他支持 onSelect 或onChange 例如 jquery ui datepicker jqueryui.com/datepicker.
@Sag1v 这正是我遇到的问题......我可能会按照杰拉德的回答建议解决它

标签： jquery html daterangepicker bootstrap-daterangepicker

【解决方案1】：

我会这样做： - 在每个数据上单击查看是否填写了开始和结束日期 - 如果没有，不要做任何事情。 - 当开始和结束数据可用时，生成一个数组，其中包含开始和结束数据之间的所有日期（包括两者）。 - 做一个 array_intersect 与阵列不可用 - 如果您最终得到一个空数组，则可以预订日期。否则无法预订。

【讨论】：