使用jQuery UI datepicker自定义范围内的特定禁用日期

Question

我正在使用jQuery UI datepicker作为用户请求参观学校的表单。巡回演出有一个日期范围，在此范围内，站点管理员可能会禁用某些预定日期。到目前为止没有问题：

/* array of booked dates generated from CMS backend */
var disabledDates = [
    '2015-05-06',
    '2015-05-08' // examples
];

$('[name="date_of_visit"]').datepicker({
    minDate: '4/30/2015', // Range start
    maxDate: '10/1/2015', // Range end
    beforeShowDay: function(date) { // Disable custom dates
        var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
        return [$.inArray(string, disabledDates) == -1];
    }
});

我beforeShowDay从这篇文章中获得了代码：Jquery UI datepicker。禁用日期数组

我知道我可以使用第二个参数将类添加到禁用元素，但是它将其添加到所有禁用日期，包括minDateand 之外的日期maxDate：

beforeShowDay：一个将日期作为参数并且必须返回带有以下内容的数组的函数：

0：是/否，指示该日期是否可选
1：要添加到日期单元格的CSS类名称，或默认表示形式的“”；
2：此日期的可选弹出式工具提示

在显示日期选择器的每一天都会调用该函数。

但是，客户要求仅“预定”日期具有视觉指示，表明该日期不可用（与默认的禁用状态不同）。不会有很多，也许是4或5。这对我来说很有意义。

有什么方法可以仅自定义beforeShowDay设置中该功能禁用的日期，或者另一种解决方案来实现我的要求？jsFiddle演示

Answer 1

Wesley，我查看了您的需求，并查看了您需要的需求，我认为这也是我所需要的，因为它本身有点独特，所以我研究了代码并提出了您想要的东西。我在下面的代码中粘贴了一些相同的解释：

以下是Jquery代码：-

var disabledDates = [
    '2015-05-06',
    '2015-05-08'
];

$('input').datepicker({
    minDate: '4/30/2015',
    maxDate: '10/1/2015',
    beforeShowDay: function(date){
         var str = jQuery.datepicker.formatDate('yy-mm-dd', date);
         var minDateArr = $(this).datepicker( "option", "minDate" ).split('/')

        var minDate = new Date(minDateArr[2],minDateArr[0]-1,minDateArr[1]); //Don't remove the -1 from minDateArr[0]-1 as the Javascript dates starts with 0.
        if ($.inArray(str, disabledDates) != -1){
            return  [false, 'special']
        }
        else if(date < minDate ){
             return [false, 'not-special']
        }
        else{
            return [true,"special"];
        }
    }
});

CSS中的一些操作：

.special span {
    color: red !important; /* should only apply to may 6 and 8 */
}
.not-special span {
    color: green !important; 
}

最重要的是必须有一个输入标签：

<input>

以下是同样的Js Fiddle链接：-http : //jsfiddle.net/ckk6hzzu/

希望这是您所需要的，并希望对其他可以用于预订/预订站点的人有所帮助。