使用 jQuery UI datepicker 在一个范围内自定义特定的禁用日期答案

【问题标题】：Customize specific disabled dates within a range using jQuery UI datepicker使用 jQuery UI datepicker 在一个范围内自定义特定的禁用日期
【发布时间】：2014-10-17 09:34:38
【问题描述】：

我正在使用 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. Disable array of Dates

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

beforeShowDay: 以日期为参数的函数，必须返回一个数组：

0：true/false 表示此日期是否可选
1：添加到日期单元格的 CSS 类名或默认的“” 演示文稿
2：此日期的可选弹出工具提示

在日期选择器中每天调用该函数之前显示出来。

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

是否有某种方法可以仅自定义设置中 beforeShowDay 函数禁用的日期，或其他解决方案来实现我所追求的目标？ jsFiddle demo

【问题讨论】：

标签： javascript jquery jquery-ui jquery-ui-datepicker

【解决方案1】：

韦斯利，我查看了您的要求并查看了您需要的要求，我认为我也可能需要它，因为它本身有点独特，所以我研究了代码并制作了您想要的东西。我正在粘贴下面的代码，并对其进行一些解释：-

以下是 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/

希望这是您所需要的，并期望这将有助于其他可用于预订/预订网站的人。

【讨论】：