我正在使用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
的日期:
然而,客户端要求仅对“已预订”日期进行视觉指示,以表明该日期不可用(与默认禁用状态不同)。 不会有很多,可能只有4或5个。 这对我来说是有意义的。beforeShowDay:接受一个日期作为参数并必须返回一个数组,其中包含:
0:表示此日期是否可选择的true/false
1:要添加到日期单元格的CSS类名称或默认表示""
2:此日期的可选弹出式工具提示在显示每个日历之前调用该函数。
在我的设置中,是否有一种方法仅自定义由
beforeShowDay
功能禁用的日期,或者其他解决方案可以实现我想要的效果? jsFiddle演示