Jquery datepicker禁用范围内的多个日期答案

【问题标题】：Jquery datepicker disable multiple dates with rangeJquery datepicker禁用范围内的多个日期
【发布时间】：2017-11-22 19:30:37
【问题描述】：

var check_in = ["Nov Thu 23, 2017","Nov Fri 24, 2017","Nov Mon 27, 2017"];

$('#check-in-date').datepicker({
dateFormat: 'M D d, yy',
beforeShowDay: function(date){
    var string = jQuery.datepicker.formatDate('M D d, yy', date);
    return [ check_in.indexOf(string) == -1 ]
}
});

这是我尝试过的代码。它工作正常，但我的问题是我只能禁用数组日期。但我也想禁用 2017 年 11 月 23 日 - 2017 年 11 月 27 日

来自 PHP 循环的 BTW 数组日期。

谁能帮帮我。

谢谢。

【问题讨论】：

不要将格式化的日期放入数组中，而是放入开始和结束时间戳对。然后你可以遍历数组，测试date是否在时间戳之间。
你能给我一个如何在时间戳之间添加条件的代码示例吗？ @Barmar
if (date >= starttime && date <= endtime) return true;

标签： jquery datepicker jquery-ui-datepicker

【解决方案1】：

这将支持同一 check_in 数组中的单个日期和开始/结束日期范围对：

var check_in = ["Nov Wed 22, 2017", ["Nov Sat 25, 2017", "Nov Tues 28, 2017"]];

$('#check-in-date').datepicker({
  dateFormat: 'M D d, yy',
  beforeShowDay: function(date) {
    var string = jQuery.datepicker.formatDate('M D d, yy', date);
    for (var i = 0; i < check_in.length; i++) {
      if (Array.isArray(check_in[i])) {
        var from = new Date(check_in[i][0]);
        var to = new Date(check_in[i][1]);
        var current = new Date(string);
        if (current >= from && current <= to) return false;
      }
    }
    return [check_in.indexOf(string) == -1]
  }
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<p>Date: <input type="text" id="check-in-date"></p>

更新：

根据注释说明，这将屏蔽从数组中的第一个条目到最后一个条目的范围，假设它们按照提供的输入按时间顺序排序：

var check_in = [
  ["Nov Thu 23, 2017", "Nov Fri 24, 2017", "Nov Mon 27, 2017", "Dec Thu 07, 2017", "Dec Sun 10, 2017", "Dec Sat 16, 2017", "Dec Sat 30, 2017", "Jan Sat 06, 2018", "Jan Wed 10, 2018", "Jan Sun 14, 2018", "Jan Mon 15, 2018", "Jan Mon 22, 2018", "Jan Wed 24, 2018", "Jan Mon 29, 2018", "Feb Fri 02, 2018", "Feb Tue 06, 2018", "Feb Wed 07, 2018", "Feb Mon 12, 2018", "Feb Fri 16, 2018", "Feb Mon 19, 2018", "Mar Fri 02, 2018", "Mar Mon 05, 2018", "Mar Thu 29, 2018", "Apr Mon 02, 2018", "Apr Wed 18, 2018", "Apr Sat 21, 2018"]
];



$('#check-in-date').datepicker({
  dateFormat: 'M D d, yy',
  beforeShowDay: function(date) {
    var current = new Date(jQuery.datepicker.formatDate('M D d, yy', date));
    var from = new Date(check_in[0][0]);
    var to = new Date(check_in[0][check_in[0].length - 1]);
    return [current < from || current > to]
  }
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<p>Date: <input type="text" id="check-in-date"></p>

【讨论】：

问题是我的数组看起来像： var check_in = [["Nov Thu 23, 2017","Nov Fri 24, 2017","Nov Mon 27, 2017","Dec Thu 07, 2017","2017 年 12 月 10 日","2017 年 12 月 16 日","2017 年 12 月 30 日","2018 年 1 月 6 日","2018 年 1 月 10 日","2018 年 1 月 14 日" ,"2018 年 1 月 15 日","2018 年 1 月 22 日","2018 年 1 月 24 日","2018 年 1 月 29 日","2018 年 2 月 5 日","2018 年 2 月 6 日"," 2018 年 2 月 7 日星期三","2018 年 2 月 12 日星期一","2018 年 2 月 16 日","2018 年 2 月 19 日","2018 年 3 月 2 日","2018 年 3 月 5 日","3 月星期四2018 年 4 月 29 日","2018 年 4 月 2 日星期一","2018 年 4 月 18 日星期三","2018 年 4 月 21 日星期六"]];
想要禁用从“2017 年 11 月 23 日”到“2018 年 4 月 21 日”@emshore
哦，好吧，这是一个与我理解的不同的问题。这实际上会更简单，我将更新我的代码。
谢谢，请更新。我尝试使用最小值和最大值，但它只显示 2017 年 11 月 23 日至 2018 年 4 月 21 日，但我想禁用这个日期范围。 @emshore
谢谢。完美的解决方案。一个问题，如果我有这样的数组 [["Nov Thu 23, 2017","Nov Fri 24, 2017","Nov Mon 27, 2017","Dec Thu 07, 2017","Dec Mon 11 , 2017","Dec Sat 16, 2017"]] 则应禁用除“2017 年 12 月 10 日”以外的所有日期。这怎么可能？ @emshore

【解决方案2】：

使用开始和结束时间戳的数组并检查日期是否在它们之间。

var check_in = [[1511395200 /* Nov 23 2017 */, 1511827199 /* Nov 27 2017 23:59:59 */]];

$('#check-in-date').datepicker({
    dateFormat: 'M D d, yy',
    beforeShowDay: function(date){
        var timestamp = date.getTime()/1000;
        for (var i = 0; i < check_in.length; i++) {
            if (timestamp >= check_in[i][0] && timestamp <= check_in[i][1]) {
                return false;
            }
        }
        return true;
    }
});

要屏蔽单个日期，请将日期范围设为该日期的 00:00 到 23:59:59。

【讨论】：

这个问题似乎表明除了单个日期之外还希望支持日期范围 - “但我也想禁用”日期范围。也许这可以澄清。我相信我的解决方案可以解释这两种选择，但如果我遗漏了什么，请随时发表评论。
在我的代码中，您只需使用该日期从00:00 到23:59:59 的时间戳范围来实现单个日期。
是的，那行得通。我是正确的，很好的解决方案。