jquery ui datepicker 是一个功能强大且高度可定制的日期选择器插件。在某些特定业务场景中，我们可能需要限制用户只能选择特定规则的日期，例如每月最后一个星期五。这可以通过 datepicker 的 beforeshowday 选项来实现。
理解 beforeShowDay 回调函数
beforeShowDay 是 Datepicker 插件提供的一个核心回调函数。它会在渲染日历中的每一天之前被调用，并接收一个 date 对象作为参数。该函数需要返回一个数组，数组的第一个元素是一个布尔值，指示该日期是否可选 (true 为可选，false 为不可选)；第二个元素是一个字符串，用于为该日期添加 CSS 类名；第三个元素是一个字符串，作为该日期的工具提示。
我们的目标是让 beforeShowDay 函数在遇到每月最后一个星期五时返回 [true, '']，而在其他日期返回 [false, '']。
初始尝试与潜在问题
在实现仅选择每月最后一个星期五时，一个常见的初步想法是结合日期是星期五 (day == 5) 和日期数字大于某个阈值（例如 date.getDate() > 23）。
// 这种方法存在逻辑缺陷，不建议直接使用
$( "#datepicker" ).datepicker({
beforeShowDay: function(date) {
var day = date.getDay(); // 0 = 星期日, 5 = 星期五
// 尝试判断是否是星期五且日期大于23
return [(day == 5 && date.getDate() > 23), ''];
}
});这种方法存在明显的缺陷。例如：
- 在二月（28天）中，如果最后一个星期五是2月22日，那么 date.getDate() > 23 将永远不成立，导致无法选择任何日期。
- 在一个有31天的月份中，如果24日是星期五，而31日也是星期五，且31日是最后一个星期五，那么24日也可能被错误地允许选择（如果它符合 > 23 的条件）。
- 在某些月份，可能有两个星期五都满足 > 23 的条件，导致同时选中了倒数第二个和最后一个星期五。
为了确保只选择“每月最后一个星期五”，我们需要一个更精确的算法。
优化的算法：精准定位最后一个星期五
要准确判断一个日期是否为每月最后一个星期五，我们需要知道该月总共有多少天。然后，我们可以检查该日期是否是星期五，并且它是否落在该月的最后七天内。如果一个星期五落在该月的最后七天内，那么它一定是该月的最后一个星期五。
以下是优化的 beforeShowDay 回调函数实现：
$(function() {
$( "#datepicker" ).datepicker({
dateFormat: 'dd/mm/yy',
closeText: "关闭",
prevText: "上月",
nextText: "下月",
currentText: "今天",
monthNames: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
monthNamesShort: ["一","二","三","四","五","六","七","八","九","十","十一","十二"],
dayNames: ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"],
dayNamesShort: ["周日","周一","周二","周三","周四","周五","周六"],
dayNamesMin: ["日","一","二","三","四","五","六"],
weekHeader: "周",
firstDay: 1, // 设置一周的第一天为星期一
// 核心逻辑：beforeShowDay 回调函数
beforeShowDay: function(date) {
// 获取当前月份的总天数
// new Date(year, month + 1, 0) 会得到下个月的第0天，即当前月的最后一天
var monthDays = new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
// 获取当前日期是星期几 (0=星期日, 1=星期一, ..., 5=星期五, 6=星期六)
var day = date.getDay();
// 判断条件：
// 1. 必须是星期五 (day == 5)
// 2. 必须是该月的最后七天之一 (date.getDate() > monthDays - 7)
// 例如：如果一个月有31天，那么最后七天是25, 26, 27, 28, 29, 30, 31。
// 日期数字大于 31 - 7 = 24，即从25日开始。
var isLastFriday = (day == 5 && date.getDate() > monthDays - 7);
// 返回一个数组：
// 第一个元素 (布尔值): true 表示可选，false 表示不可选
// 第二个元素 (字符串): CSS 类名，这里为空字符串
return [isLastFriday, ''];
}
});
});代码解释：
-
monthDays = new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
- 这是一个获取当前月份总天数的技巧。new Date(year, month + 1, 0) 会创建一个表示下个月第一天前一天的 Date 对象，即当前月的最后一天。然后 .getDate() 就能得到该月的总天数。
-
day = date.getDay();
- 获取当前日期是星期几。JavaScript 中，getDay() 返回 0 (星期日) 到 6 (星期六) 的整数。我们关注的是星期五，即 day == 5。
-
date.getDate() > monthDays - 7
- 这是判断日期是否落在该月最后七天内的关键。如果一个日期 date.getDate() 大于 monthDays - 7，那么它就位于该月的最后七天内。例如，如果一个月有30天，monthDays - 7 是 23。那么任何大于23的日期（即24, 25, ..., 30）都属于最后七天。
-
isLastFriday = (day == 5 && date.getDate() > monthDays - 7);
- 将上述两个条件结合起来：只有当日期是星期五，并且它位于该月的最后七天内时，isLastFriday 才为 true。
通过这种方式，我们能够准确地识别出每个月的最后一个星期五，并将其设置为可选日期。
注意事项
- 国际化设置： 示例代码中包含了完整的德语国际化配置（closeText, monthNames 等）。在实际项目中，请根据目标用户群体调整这些本地化字符串。
- CSS 样式： beforeShowDay 返回数组的第二个元素可以用于为特定日期添加自定义 CSS 类。例如，你可以添加 'last-friday' 类，然后通过 CSS 为这些日期设置特殊的背景色或边框，以增强视觉提示。
- 性能考量： beforeShowDay 函数在渲染日历时会为每个日期调用一次。对于大多数应用来说，上述逻辑的性能开销可以忽略不计。但在处理包含大量日期的复杂日历或在性能敏感的环境中，应注意回调函数的复杂性。
总结
通过灵活运用 jQuery UI Datepicker 的 beforeShowDay 回调函数，并结合精确的日期逻辑判断，我们可以轻松实现各种复杂的日期选择限制。本文提供的算法能够准确无误地识别每月最后一个星期五，避免了常见逻辑错误，为开发者提供了强大的日期控制能力。在实际开发中，理解并善用这些回调机制，将大大提升日期选择器的功能性和用户体验。
