当你在 jQuery UI Datepicker 中设置了 minDate
大于 0 时,日期选择器会自动为可选择的日期添加蓝色样式。这是 jQuery UI Datepicker 的默认行为,用于直观地区分可选和不可选的日期。
要移除这个蓝色样式,你有几种方法可以选择:
/* 移除minDate大于0时的蓝色背景 */
.ui-datepicker .ui-state-highlight {
background: none !important;
border-color: inherit !important;
}
/* 如果你只想移除背景色但保留边框 */
.ui-datepicker .ui-state-highlight {
background: none !important;
}
$(function() {
$("#datepicker").datepicker({
minDate: 1, // 设置minDate大于0
beforeShowDay: function(date) {
// 移除默认的highlight类
return [true, ''];
}
});
});
如果你想完全控制日期的样式,可以使用 beforeShowDay
回调函数:
$(function() {
$("#datepicker").datepicker({
minDate: 1,
beforeShowDay: function(date) {
var minDate = new Date();
minDate.setDate(minDate.getDate() + 1); // 明天开始可选
return [
date >= minDate, // 是否可选
'', // 自定义class
'' // 自定义提示文本
];
}
});
});
jQuery UI Datepicker 在 minDate
大于 0 时,会自动为符合条件的日期添加 ui-state-highlight
类。这个类默认带有蓝色背景样式。通过覆盖这个类的CSS或阻止该类被添加,就能移除蓝色样式。
这种自定义通常用于:
!important
可以确保覆盖默认样式,但应谨慎使用没有搜到相关的沙龙