jQuery UI Datepicker：如何精准选择每月最后一个星期五

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 的条件，导致同时选中了倒数第二个和最后一个星期五。

为了确保只选择“每月最后一个星期五”，我们需要一个更精确的算法。

优化的算法：精准定位最后一个星期五

要准确判断一个日期是否为每月最后一个星期五，我们需要知道该月总共有多少天。然后，我们可以检查该日期是否是星期五，并且它是否落在该月的最后七天内。如果一个星期五落在该月的最后七天内，那么它一定是该月的最后一个星期五。

星火绘镜

星火绘镜是科大讯飞推出的一个AI短视频创作平台，可以帮助用户进行AI短剧、AI预告片、MV创作

29

查看详情

以下是优化的 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, ''];
        }
    });
});

代码解释：

1. monthDays = new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
   • 这是一个获取当前月份总天数的技巧。new Date(year, month + 1, 0) 会创建一个表示下个月第一天前一天的 Date 对象，即当前月的最后一天。然后 .getDate() 就能得到该月的总天数。
2. day = date.getDay();
   • 获取当前日期是星期几。JavaScript 中，getDay() 返回 0 (星期日) 到 6 (星期六) 的整数。我们关注的是星期五，即 day == 5。
3. date.getDate() > monthDays - 7
   • 这是判断日期是否落在该月最后七天内的关键。如果一个日期 date.getDate() 大于 monthDays - 7，那么它就位于该月的最后七天内。例如，如果一个月有30天，monthDays - 7 是 23。那么任何大于23的日期（即24, 25, ..., 30）都属于最后七天。
4. isLastFriday = (day == 5 && date.getDate() > monthDays - 7);
   • 将上述两个条件结合起来：只有当日期是星期五，并且它位于该月的最后七天内时，isLastFriday 才为 true。

通过这种方式，我们能够准确地识别出每个月的最后一个星期五，并将其设置为可选日期。

注意事项

• 国际化设置： 示例代码中包含了完整的德语国际化配置（closeText, monthNames 等）。在实际项目中，请根据目标用户群体调整这些本地化字符串。
• CSS 样式： beforeShowDay 返回数组的第二个元素可以用于为特定日期添加自定义 CSS 类。例如，你可以添加 'last-friday' 类，然后通过 CSS 为这些日期设置特殊的背景色或边框，以增强视觉提示。
• 性能考量： beforeShowDay 函数在渲染日历时会为每个日期调用一次。对于大多数应用来说，上述逻辑的性能开销可以忽略不计。但在处理包含大量日期的复杂日历或在性能敏感的环境中，应注意回调函数的复杂性。

总结

通过灵活运用 jQuery UI Datepicker 的 beforeShowDay 回调函数，并结合精确的日期逻辑判断，我们可以轻松实现各种复杂的日期选择限制。本文提供的算法能够准确无误地识别每月最后一个星期五，避免了常见逻辑错误，为开发者提供了强大的日期控制能力。在实际开发中，理解并善用这些回调机制，将大大提升日期选择器的功能性和用户体验。

以上就是jQuery UI Datepicker：如何精准选择每月最后一个星期五的详细内容，更多请关注php中文网其它相关文章！