jquery UI datepicker - 禁用日期范围

Question

我正在努力让某些东西正常工作 - 我收到“未捕获的类型错误：无法读取未定义的属性 '0'”错误，我不知道为什么！

我正在尝试在度假小屋网站上使用 jQuery UI 日期选择器来指示可用性和季节（低、高等）。我有一个作为 datePicker 事件的功能来检查是否有一个日期的预订，如果没有，我会出去检查我们在哪个季节（在非旺季可以在星期一或星期五进行预订。在旺季，只有星期五。）

我正在使用 cms 生成一些日期数组（通过循环），然后我可以在构建日历时对其进行迭代，因此 javascript 有点冗长。

数组如下所示：

<script> 
//Peak Season 1 2011
var ps1 = new Date('June 17, 2011');
var pe1 = new Date('September 2, 2011');
//Peak Season 2 2011
var ps2 = new Date('December 19, 2011');
var pe2 = new Date('January 6, 2012');
// season start and end date arrays
var peakStart = new Array(ps1,ps2);
var peakEnd = new Array(pe1,pe2);

// Bookings
//Mr &amp; Mrs Smith 
var cbs1 = new Date('May 27, 2011');
var cbe1 = new Date('June 5, 2011');
//Mr &amp; Mrs Jones 
var cbs2 = new Date('September 1, 2011');
var cbe2 = new Date('September 18, 2011');
var cottageStart = new Array(cbs1,cbs2);
var cottageEnd = new Array(cbe1,cbe2);

// last date of season - don't book past here
var lastDate = '01/06/2012';
</script>

我从 beforeShowDate 事件中调用了以下函数，以根据预订数组检查日历日期：

$('#cottageCal').datepicker({
    minDate: '0d',
    maxDate: lastDate,
    beforeShowDay: function(date) {
        $.each(cottageStart, function(key, value) { 
          //alert (((date >= value) && (date <= value)) ? 'booked' : 'notbooked');
            if ((date >= value) && (date <= value)) {
                return [false, 'booked'];
            } else {
                return checkPeak(date);
            }
        });
    }
});

最后，从这里调用的 checkPeak 函数如下所示：

var checkPeak = function(date) {
    var day = date.getDay();
    var month = date.getMonth();
    $.each(peakStart, function(key, value) { 
        if ((date > value) && (date < value)) {
        /* december peak bookings on monday*/
            if (month != 11) {
                return [(day == 5), ''];
            } else {
                return [(day == 1), ''];
            }
        }
        if (month == 0) {
            return false;
        } else {
            // it's not during a peak period
            return [(day == 1 || day == 5), ''];
        }
    });
}

我一定是做错了什么，但我看不出是什么！

Answer 1

一个很老的问题，但我解决了同样的问题，来到这里寻找解决方案，然后自己解决，更加关注documentation：

beforeShowDay - function(date) 该函数将日期作为 参数和 必须返回一个 [0] 等于 true/false 的数组 表示这个日期是否可选，1等于一个CSS 默认演示文稿的类名或“”，以及 [2] 可选 此日期的弹出工具提示。每天都会调用它 日期选择器在显示之前。

所以，为了确定，我会像这样明确地重写原始问题的代码：

$('#cottageCal').datepicker({
    minDate: '0d',
    maxDate: lastDate,
    beforeShowDay: function(date) {
        $.each(cottageStart, function(key, value) { 
            if ((date >= value) && (date <= value)) {
                return new Array(false, 'booked');
            } else {
                return checkPeak(date);
            }
        });
    }
});

还有这个：

var checkPeak = function(date) {
    var day = date.getDay();
    var month = date.getMonth();
    var returnArr = new Array();
    $.each(peakStart, function(key, value) { 
        if ((date > value) && (date < value)) {
        /* december peak bookings on monday*/
            if (month != 11) {
                returnArr[0] = (day == 5);
                returnArr[1] = '';
                return returnArr;
            } else {
                returnArr[0] = (day == 1);
                returnArr[1] = '';
                return returnArr;
            }
        }
        if (month == 0) {
            returnArr[0] = false;
            return returnArr;
        } else {
            // it's not during a peak period
            returnArr[0] = (day == 1 || day == 5);
            returnArr[1] = '';
            return returnArr;
        }
    });
}

对我来说效果很好！

Answer 2

@Penzizzle

你需要什么最小日期？ 0d 在minDate: 中无效

任一设置minDate:'-1d'

见reference