jquery UI datepicker - 禁用日期范围 [英] jquery UI datepicker - disabling date ranges

问题描述

我正在努力工作 - 我得到一个'未捕获TypeError：无法读取属性'0'未定义'错误与下面，我不知道为什么！

我试图在一个假日小屋的网站上使用jQuery UI datepicker来指示可用性和季节（低，高等）。我有一个datePicker事件的功能，以检查是否有一个日期的预订，如果没有，我然后出去检查我们在哪个季节（非旺季预订可以在星期一或星期五进行。我在使用cms来生成一些日期数组（通过循环），然后我可以在构建日历时重复一遍，所以javascript有点冗长。

数组如下所示：

 < script> 
 // Peak Season 1 2011 
 var ps1 = new Date（'2011年6月17日'）; 
 var pe1 = new Date（'2011年9月2日'）; 
 // Peak Season 2 2011 
 var ps2 = new Date（'2011年12月19日'）; 
 var pe2 = new Date（'2012年1月6日'）; 
 //季节开始和结束日期数组
 var peakStart = new Array（ps1，ps2）; 
 var peakEnd = new Array（pe1，pe2）; 
 
 //预订
 // Mr& amp; amp; Mrs Smith 
 var cbs1 = new Date（'2011年5月27日'）; 
 var cbe1 = new Date（'2011年6月5日'）; 
 // Mr& amp; amp Mrs Jones 
 var cbs2 = new Date（'2011年9月1日'）; 
 var cbe2 = new Date（'2011年9月18日'）; 
 var cottageStart = new Array（cbs1，cbs2）; 
 var cottageEnd = new Array（cbe1，cbe2）; 
 
 //最后一个季节的日期 - 不要在这里预订
 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））{
返回[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））{
 / *在星期一* / 
 if（month！= 11）{
 return [（day == 5），'']; 
} else {
 return [（day == 1），'']; 
} 
} 
 if（month == 0）{
 return false; 
} else {
 // it's不是在高峰时段
 return [（day == 1 || day == 5），'']; 
} 
}）; 
} 
  

我必须在这里做一些根本错误的事情，但我看不到什么！

解决方案

相当一个旧问题，但我遇到了同样的问题，在这里找到寻找解决方案，然后自己解决付款更多关注文档：

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

所以，只是为了确定，我会重写原始问题的代码，如下所示：

  $（'＃cottageCal'）datepicker（{
 minDate： '0d'，
 maxDate：lastDate，
 beforeShowDay：function（date）{
 $ .each（cottageStart，function（key，value）{
 if（（date> = value）&（日期< = 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））{
 / *在星期一* / 
 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 {
 //不是在高峰期
 returnArr [0] =（day == 1 || day == 5）; 
 returnArr [1] =''; 
 return returnArr; 
} 
}）; 
} 
  

它对我来说很好！

I'm struggling to get something working - I'm getting a 'Uncaught TypeError: Cannot read property '0' of undefined' error with the below and I can't figure out why!

I'm trying to use the jQuery UI datepicker on a site for a holiday cottage to indicate availability and season (low, high etc). I have a function as a datePicker event to check if there's a booking for a date, and if not, I then go out to check which season we're in (In non-peak season bookings can be made on a Monday or Friday. In Peak season, it's Fridays only. )

I'm using a cms to generate some date arrays (via loops) that I can then iterate through when building the calendar, so the javascript is a little verbose.

The arrays look like this:

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

I have the following function that I call from the beforeShowDate event to check the calendar date against the booking array:

$('#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);
            }
        });
    }
});

Finally, the checkPeak function that is called from here looks like this:

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), ''];
        }
    });
}

I must be doing something fundamentally wrong here but I can't see what!

解决方案

Quite an old question, but I got through the same problem, landed here searching for a solution and then resolved by myself paying more attention to the documentation:

beforeShowDay - function(date) The function takes a date as a parameter and must return an array with [0] equal to true/false indicating whether or not this date is selectable, 1 equal to a CSS class name(s) or '' for the default presentation, and [2] an optional popup tooltip for this date. It is called for each day in the datepicker before it is displayed.

So, just to be sure, I would rewrite the orginal question's code explicitely like this:

$('#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);
            }
        });
    }
});

and this:

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;
        }
    });
}

It worked fine for me!

这篇关于jquery UI datepicker - 禁用日期范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！