使用jQuery UI日期选择器自定义范围内的特定禁用日期

Question

我正在使用jQuery UI日期选择器来为一个表单提供帮助，用户可以通过该表单请求参观学校的时间。在一定的时间范围内，管理员可能会禁用某些已预订的日期。到目前为止还没有问题。

/* 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. Disable array of Dates 我知道我可以通过第二个参数向禁用的元素添加类，但它会将其添加到所有禁用的日期上，包括那些超出minDate和maxDate的日期：

beforeShowDay：接受一个日期作为参数并必须返回一个数组，其中包含：

0：表示此日期是否可选择的true/false
1：要添加到日期单元格的CSS类名称或默认表示""
2：此日期的可选弹出式工具提示

在显示每个日历之前调用该函数。

然而，客户端要求仅对“已预订”日期进行视觉指示，以表明该日期不可用（与默认禁用状态不同）。 不会有很多，可能只有4或5个。 这对我来说是有意义的。

在我的设置中，是否有一种方法仅自定义由beforeShowDay功能禁用的日期，或者其他解决方案可以实现我想要的效果？ jsFiddle演示

- Wesley Murch

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/ 希望这个链接能够在预订/预约网站上有所帮助。

- Chand Prakash