在Web项目里使用jQuery UI的Datepicker时，产品经常提出这样的需求：把某些特定日期，例如节假日、活动日或者合同截止日，在用户鼠标悬停时显示与众不同的背景颜色，以便起到提示作用。原生Datepicker并没有提供针对单天悬停色的配置项，因此我们需要借助它暴露的钩子与CSS层级控制来实现。
一、Datepicker渲染与样式覆盖原理
jQuery UI Datepicker在每次打开或重绘日历时，会为每一个日期单元格生成<a>或者<td>节点，并统一赋予类似ui-state-default的class。鼠标悬停时，UI的CSS会通过.ui-datepicker td:hover a这类选择器把背景改成主题色。如果我们想让个别日期表现不同，就不能只改全局:hover规则，否则所有格子都会变。
关键点是：Datepicker提供了一个名为beforeShowDay的回调函数，它在渲染每一天时被调用，允许我们返回额外的class名称。只要给目标日期加上自建的class，例如special-day，随后用CSS针对.special-day:hover写样式，就能精准控制。由于UI自身选择器权重大概在两层class加标签，我们写的规则只要层级稍深或使用!important便可稳覆盖。
二、使用beforeShowDay标记特殊日期
下面是一段基础的初始化代码，我们把2024年某些固定日期设为特殊日，并加上special-day类。注意beforeShowDay需要返回数组，第二项是额外class名。
$(function () {
// 定义需要定制的日期字符串集合
var specialDates = ['2024-01-01', '2024-05-01', '2024-10-01'];
$('#datepicker').datepicker({
dateFormat: 'yy-mm-dd',
beforeShowDay: function (date) {
// 把日期格式化为 yyyy-mm-dd
var y = date.getFullYear();
var m = ('0' + (date.getMonth() + 1)).slice(-2);
var d = ('0' + date.getDate()).slice(-2);
var dateStr = y + '-' + m + '-' + d;
if (specialDates.indexOf(dateStr) !== -1) {
// 返回额外class为 special-day
return [true, 'special-day', '特殊日期'];
}
return [true, '', ''];
}
});
});
以上代码在日历渲染时，会检查每一个日期是否在我们的数组中。若是，则给该单元格的链接元素追加special-day类，同时设置鼠标悬停提示文字。这种方式比事后用DOM查询改样式更可靠，也不会在翻月时丢失标记。
如果特殊日期来自后端接口，只需把specialDates换成异步获取后的数组即可。由于beforeShowDay是同步函数，建议在初始化前先拿到数据，或者先渲染再调用refresh方法重绘。
三、编写悬停颜色CSS
仅仅加了class还不够，必须写出能战胜默认主题的CSS。下面给出两种写法，第一种依靠提高选择器具体度，第二种直接使用!important。
/* 写法一：提升层级权重 */
.ui-datepicker td .special-day:hover {
background-color: #ff6600;
color: #ffffff;
border-color: #ff6600;
}
/* 写法二：直接覆盖 */
.special-day.ui-state-default:hover {
background-color: #ff6600 !important;
color: #fff !important;
}
这里要注意，Datepicker把special-day加在了原本就带有ui-state-default的<a>标签上，所以悬停时两个类共存。若只用.special-day:hover可能权重不够，因为UI原始规则是.ui-datepicker td:hover a，包含了标签和两层结构。
建议把这段CSS放在引入jQuery UI样式表之后，保证层叠顺序占优。如果项目用了CSS模块或预处理器，也可以把日期配置与样式通过变量联动，避免颜色硬编码。
四、与直接改全局样式的对比
有些开发者图省事，直接写.ui-datepicker td:hover a { background: red; }，这会带来明显问题：所有日期悬停都变红，无法区分普通与特殊日；而且一旦产品想让特殊日显示橙色、普通日保持蓝色，全局写法就无能为力。
| 方案 | 精准度 | 可维护性 | 性能 |
|---|---|---|---|
| 全局:hover改色 | 低，影响全部日期 | 差，需求变更需重写 | 无差异 |
| beforeShowDay加类+专属CSS | 高，仅目标日期 | 好，日期与样式解耦 | 无差异 |
从表中可以看出，钩子方案虽然在初始化时多写几行JS，但后期调整颜色、增删日期都只改数据或一处CSS，明显更合理。
五、常见误区与排查
第一个误区是以为加了class就能立刻看到颜色，却忘了Datepicker把日期包在<a>里，悬停实际发生在链接上，所以CSS必须命中a标签或单元格内的链接状态。第二个误区是在CSS里用了<td.special-day>但没转义，在正文描述时若写HTML标签名要写成<td>才不会破坏结构，不过CSS选择器内部不需要转义。
若发现样式不生效，可打开浏览器审查元素，确认special-day是否真实存在于对应节点，以及计算样式里哪条规则优先级更高。必要时用!important兜底，但别滥用，以免干扰其他交互状态如选中态ui-state-active。
六、完整示例整合
把前面的JS与CSS组合，就是一个可运行的定制悬停色方案。以下为页面片段示例，注意<style>放在UI样式之后。
<link rel="stylesheet" href="https://ipipp.com/ui/jquery-ui.css">
<style>
.ui-datepicker td .special-day:hover {
background-color: #ff6600;
color: #fff;
border-color: #ff6600;
}
</style>
<input type="text" id="datepicker">
<script src="https://ipipp.com/jquery-3.6.0.min.js"></script>
<script src="https://ipipp.com/ui/jquery-ui.min.js"></script>
<script>
$(function () {
var specialDates = ['2024-01-01', '2024-05-01'];
$('#datepicker').datepicker({
beforeShowDay: function (date) {
var s = date.getFullYear() + '-' +
('0'+(date.getMonth()+1)).slice(-2) + '-' +
('0'+date.getDate()).slice(-2);
if (specialDates.indexOf(s) > -1) {
return [true, 'special-day', '节日'];
}
return [true, '', ''];
}
});
});
</script>
通过这个完整示例，你可以直接将特殊日期数组替换成业务数据，就能在项目中实现精准的悬停颜色定制。后续若需要扩展成点击高亮或区间标记，也同样基于beforeShowDay的思路延伸即可。
jQuery_UIDatepickerhover_color修改时间：2026-08-07 06:33:34