本文详解 jQuery UI Datepicker 中 beforeShowDay 的常见误用问题，包括日期格式化错误、CSS 选择器失效及逻辑反转，并提供可直接运行的修复方案。
本文详解 jquery ui datepicker 中 `beforeshowday` 的常见误用问题，包括日期格式化错误、css 选择器失效及逻辑反转，并提供可直接运行的修复方案。
在使用 jQuery UI Datepicker 高亮特定日期时，开发者常遇到样式不生效、日期匹配失败等问题。核心原因通常有三：日期格式不一致、CSS 作用域错误 和 逻辑判断颠倒。下面我们将逐一剖析并给出健壮解决方案。
✅ 正确的日期格式化是前提
jQuery UI 的 $.datepicker.formatDate() 方法中，年份占位符应为 'yy'（两位）或 'yyyy'（四位），而非 'yyyyy' 或混用。原代码中 'dd-mm-yyyy' 实际会输出如 14-10-20232023 的错误字符串（因重复解析年份），导致 $.inArray() 匹配失败。
✅ 正确写法应统一为 'dd-mm-yy'（对应 14-10-23）或 'dd-mm-yyyy'（需确保数组中日期也严格为四位年份）：
var dates = ['14-10-2023', '15-10-2023', '16-10-2023'];
$('#datepicker').datepicker({
beforeShowDay: function(date) {
// ✅ 使用 'dd-mm-yyyy' 格式，与数组完全一致
var formatted = $.datepicker.formatDate('dd-mm-yyyy', date);
var isHighlighted = $.inArray(formatted, dates) !== -1;
// 返回 [isSelectable, cssClass, tooltip]
return [true, isHighlighted ? 'highlighted-date' : ''];
}
});⚠️ 注意：beforeShowDay 回调必须返回一个三元数组 [isSelectable, cssClass, tooltip]。即使所有日期都可选，第一项也应显式设为 true。
jQuery 1.12.4下载jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。
✅ CSS 必须精准命中链接元素
Datepicker 渲染后，每个日期单元格 <td> 内部包含一个 <a> 标签（即实际点击目标）。若仅定义 .highlighted-date { color: red; }，样式将作用于 <td>，但文字颜色由 <a> 继承 —— 而 <a> 默认有 color 和 text-decoration，会覆盖父级样式。
✅ 正确做法是直接针对 <a> 设置样式，并添加 !important 防止被 Bootstrap 等框架重置：
.highlighted-date a {
color: #d32f2f !important; /* 深红色 */
font-weight: bold !important;
background-color: #fff3f3 !important;
border-radius: 4px;
}✅ 补充建议：增强健壮性
-
日期标准化：建议统一使用 ISO 格式（YYYY-MM-DD）处理，避免日/月顺序歧义：
var dates = ['2023-10-14', '2023-10-15', '2023-10-16']; var isoString = $.datepicker.formatDate('yy-mm-dd', date); // 注意顺序：yy-mm-dd - 引入校验：检查 dates 是否为数组，避免 $.inArray 报错；
-
依赖版本兼容性：确保 jQuery（≥1.9）与 jQuery UI（≥1.11）版本匹配，推荐使用 CDN 官方最新稳定版：
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script> <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/ui-lightness/jquery-ui.css">
最后，请确保 HTML 中的 input 元素具有正确的 id（如 <input type="text" id="datepicker">），且初始化时机在 DOM 加载完成后（推荐包裹在 $(document).ready() 中）。完成以上调整后，指定日期将清晰高亮，逻辑清晰、样式可靠、兼容性强。
