如何修改jQuery UI Datepicker实现多周（2/3周）选择功能？

针对你现有的单周选择日历，以下是改造为支持连续多周（如2周、3周）选择的完整解决方案：

改造后完整代码 #

<div class="week-picker"></div>
<br />
<br />
<label>选择周期 : </label> <span id="startDate"></span> - <span id="endDate"></span>

<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/base/jquery-ui.css">

<script>
$(function () {
    var startDate;
    var endDate;
    // 配置要选择的连续周数，可修改为2、3等数值
    var weekCount = 2;

    var selectCurrentWeeks = function () {
        window.setTimeout(function () {
            $('.week-picker').find('.ui-datepicker-current-day a').addClass('ui-state-active')
        }, 1);
    }
    var $weekPicker = $('.week-picker');

    function updateWeekStartEnd() {
        var date = $weekPicker.datepicker('getDate') || new Date();
        // 以选中日期所在周的周一为起始点（若要周日为起始，改为date.getDay() || 7）
        var weekStart = new Date(date.getFullYear(), date.getMonth(), date.getDate() - (date.getDay() === 0 ? 6 : date.getDay() - 1));
        // 根据配置的周数计算多周后的结束日期
        startDate = weekStart;
        endDate = new Date(weekStart.getTime() + (weekCount * 7 - 1) * 24 * 60 * 60 * 1000);
    }

    updateWeekStartEnd();

    function updateDateText(inst) {
        var dateFormat = inst != 'start' &&  inst.settings.dateFormat ? inst.settings.dateFormat : $.datepicker._defaults.dateFormat;
        $('#startDate').text($.datepicker.formatDate(dateFormat, startDate, inst.settings));
        $('#endDate').text($.datepicker.formatDate(dateFormat, endDate, inst.settings));
    }

    updateDateText('start');

    $weekPicker.datepicker({
        showOtherMonths: true,
        selectOtherMonths: true,
        onSelect: function (dateText, inst) {
            updateWeekStartEnd();
            updateDateText(inst);
            selectCurrentWeeks();
        },
        beforeShowDay: function (date) {
            var cssClass = '';
            // 判断日期是否在多周范围内，添加高亮类
            if (date >= startDate && date <= endDate) cssClass = 'ui-datepicker-current-day';
            return [true, cssClass];
        },
        onChangeMonthYear: function (year, month, inst) {
            selectCurrentWeeks();
        }
    });

    selectCurrentWeeks();

    // 优化鼠标悬停：高亮当前悬停周及后续连续指定周数的所有日期
    $('.week-picker .ui-datepicker-calendar td a').on('mouseenter', function () {
        var hoverDate = new Date($(this).attr('href').match(/\d+/g)[2], $(this).attr('href').match(/\d+/g)[1]-1, $(this).attr('href').match(/\d+/g)[0]);
        var hoverWeekStart = new Date(hoverDate.getFullYear(), hoverDate.getMonth(), hoverDate.getDate() - (hoverDate.getDay() === 0 ? 6 : hoverDate.getDay() - 1));
        
        $('.week-picker .ui-datepicker-calendar td a').each(function() {
            var cellDate = new Date($(this).attr('href').match(/\d+/g)[2], $(this).attr('href').match(/\d+/g)[1]-1, $(this).attr('href').match(/\d+/g)[0]);
            var cellWeekStart = new Date(cellDate.getFullYear(), cellDate.getMonth(), cellDate.getDate() - (cellDate.getDay() === 0 ? 6 : cellDate.getDay() - 1));
            var weekDiff = Math.floor((cellWeekStart - hoverWeekStart) / (7 * 24 * 60 * 60 * 1000));
            
            if (weekDiff >= 0 && weekDiff < weekCount) {
                $(this).addClass('ui-state-hover');
            }
        });
    }).on('mouseleave', function () {
        $('.week-picker .ui-datepicker-calendar td a').removeClass('ui-state-hover');
    });

});
</script>

关键改动说明 #

• 可配置周数：新增weekCount变量，直接修改数值即可切换2周、3周等选择模式
• 重写日期计算逻辑：调整updateWeekStartEnd函数，以选中日期所在周的周一为起始，根据配置周数计算多周结束日期，支持自定义一周起始日
• 更新选中样式判断：保留原beforeShowDay逻辑，只要日期在多周范围内就添加高亮类
• 优化交互体验：替换原单行hover逻辑，改为悬停时高亮当前周及后续连续指定周数的所有日期
• 初始化日期显示：开启updateDateText('start')，页面加载时直接展示初始多周范围

内容的提问来源于stack exchange，提问作者will