如何为Datepicker指定其他页面传入的年份以展示对应全年日历

你需要先获取从其他页面传入的年份参数，再调整datepicker的初始化逻辑即可，具体实现如下：

步骤1：获取URL中的年份参数 #

先实现一个通用的URL查询参数读取方法，拿到其他页面传递的年份值：

function getQueryParam(name) {
    const reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    const r = window.location.search.substr(1).match(reg);
    if (r != null) return decodeURIComponent(r[2]);
    return null;
}

步骤2：调整datepicker初始化逻辑 #

拿到年份参数后，修正chouseYear变量和日历配置项：

// 优先取URL传入的年份，没有匹配参数的话默认使用当前年份
const chouseYear = getQueryParam('year') ? parseInt(getQueryParam('year')) : new Date().getFullYear();

function drawDatepicker(){
    // 先销毁已存在的datepicker实例，避免重复初始化报错
    if($('#picker').hasClass('hasDatepicker')){
        $('#picker').datepicker('destroy');
    }

    $('#picker').datepicker({
        showOtherMonths: true,
        selectOtherMonths: true,
        numberOfMonths: [3,4],
        stepMonths: 0,
        yearRange: chouseYear + ":" + chouseYear,
        // 当前年保持原有的当前月份定位逻辑，非当前年默认从1月开始展示完整全年
        showCurrentAtPos: chouseYear === new Date().getFullYear() ? new Date().getMonth() : 0,
        defaultDate: new Date(chouseYear, 0, 1), // 强制默认日期为选中年份的1月1日，避免日期偏移
        onSelect: function (dateText, datePicker) {
            datePicker.drawMonth += $("#picker").datepicker("option", "showCurrentAtPos");
            var radVal = $('input[name="typeDay"]:checked').val();
            if(radVal == 1){
                addOrRemoveDate(dateText, day_off);
            }
            if(radVal == 2){
                addOrRemoveDate(dateText, radonica);
            }
            console.log(day_off);
            console.log(radonica);
        },
        beforeShowDay: function (date) {
            var year = date.getFullYear();
            var month = padNumber(date.getMonth() + 1);
            var day = padNumber(date.getDate());
            var dateString = day + "." + month + "." + year;
            var gotDate1 = jQuery.inArray(dateString, day_off);
            if (gotDate1 >= 0) {
                return [true, "ui-state-highlight"];
            }
            var gotDate2 = jQuery.inArray(dateString, radonica);
            if (gotDate2>=0){
                return [true, "ui-widget-header"];
            }
            return [true, ""];
        }
    });
}

步骤3：其他页面跳转配置 #

从其他页面跳转到日历页时，在URL后拼接年份参数即可，示例：

// 跳转到日历页，指定显示2025年的日历
window.location.href = '你的日历页面地址?year=2025';

注意事项 #

• 要确保chouseYear变量在drawDatepicker函数执行前完成赋值，否则会读取到空值导致年范围配置错误
• 如果页面支持无刷新切换年份，修改chouseYear变量后重新调用drawDatepicker()即可刷新日历显示

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