我正在尝试在 jQuery Datepicker 中突出显示或更改一系列日期的 CSS。我希望用户能够单击开始日期和结束日期，并突出显示该范围之间的所有日期。单击时，我能够创建该范围内的日期数组，但由于某种原因，我无法向其中添加类来更改 CSS。
如何获取该日期数组，然后为它们添加一个 CSS 类以更改背景/突出显示？
任何帮助将不胜感激！
谢谢
【问题讨论】：
标签： jquery jquery-ui datepicker range highlight
好的，假设您已经在数组中选择了用户选择的日期。您可以使用 'beforeShowDay' 选项指定一个函数，该函数将遍历当前可见月份中的每一天，然后您的函数可以将每个日期与您的数组进行比较，并在匹配的地方应用一个 css 类。
所以例如像这样初始化日期选择器...
jQuery(".cal").datepicker({
beforeShowDay: checkDates
})
函数 checkDates() 看起来像这样（假设你的数组被称为 dateArray....
function checkDates(theDate){
for(i=0;i<dateArray.length;i++){
if(dateArray[i].valueOf()===thedate.valueOf()){
return [false,"cssClass","title"];
}else return [true,""]
}
})
如果日期包含在 dateArray 中，这会将“cssClass”类应用于日期
return语句中的true/false位决定了日期是否可选，标记为'title'的位是html标题属性（工具提示）
铌。这会将日期与最接近的毫秒进行比较，因此您可能希望将其修改为仅匹配天数
【讨论】：
我已经成功地使用了一个日期选择器作为起始日期和一个日期选择器作为一个日期，所以我为一个日期选择器修改了它。代码如下：
$(function () {
var today = new Date();
var thisYear = (today).getFullYear();
var fromDate = '1/1/2000' //this is the initial from date to set the datepicker range
var toDate = '1/7/2000' // this is the initial to date to set the datepicker range
//... initialize datepicker....
},
beforeShowDay: function(date){
//if the date is in range
if (date >= fromDate && date <= toDate) {
return [true, 'ui-individual-date', '']; //applies a css class to the range
}
else {
return [true, '', ''];
}
},
onSelect: function (dateText, obj) {
//sets the new range to be loaded on refresh call, assumes last click is the toDate
fromDate = toDate;
toDate = new Date(dateText);
$(".classDp1").datepicker("refresh");
$(".classDp2").datepicker("refresh");
},
每次刷新 beforeShowDay 函数时都会使用新的 fromDate 和 toDate 范围调用。将变量放在函数外部并在函数内部修改它们可以在每次点击时应用 css 的突出显示。
【讨论】：