Jquery 日期选择器禁用范围内的多个日期

Question

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 日星期一

BTW 数组日期来自 PHP 循环。

谁能帮帮我。

谢谢。

Answer 1

这将支持同一 check_in 数组中的单个日期和成对的 start/end 日期范围：

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>

Answer 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。

Jquery 日期选择器禁用范围内的多个日期

Jquery datepicker disable multiple dates with range

jquery

datepicker

jquery-ui-datepicker