要解决这个问题,我们可以使用Air日期选择器的beforeShowDay
选项。beforeShowDay
选项是用于设置日期单元格的样式和禁用日期的函数。该函数将被调用以显示每个日期单元格。在该函数中,我们可以检查日期是否应该禁用,并为其应用所需样式。
以下是一个示例代码,该示例代码演示如何禁用今天之前的所有日期,并为禁用的日期应用灰色文本颜色。
$(function() {
// 禁用之前的所有日期,“0”表示星期天
const disableBeforeDate = new Date();
const disableBefore = disableBeforeDate.setDate(disableBeforeDate.getDate() - 1);
$('#datepicker').datepicker({
beforeShowDay: function(date) {
// 获取当前日期的年、月、日
const year = date.getFullYear();
const month = date.getMonth() + 1; // 月份从0开始,要加1
const day = date.getDate();
// 对比当前日期和禁用日期
const disableDate = new Date(disableBefore);
// 如果当前日期在禁用日期之前,则禁用该日期并应用灰色文本颜色
if (date < disableDate) {
return [false, 'disabled-date'];
}
// 否则,返回正常日期和样式
return [true, ''];
}
});
});
接下来,我们需要使用CSS为已禁用的日期应用样式。在这个例子中,我们将为所有类名为“disabled-date”的日期单元格应用灰色文本颜色。
.disabled-date {
color: #ccc;
}
通过这个解决方案,我们可以在Air日期选择器中禁用特定日期并应用所需样式,即使是在当前月份。