Bootstrap Datepicker仅显示年月时切换年份后下年按钮消失问题

问题描述 #

配置Bootstrap Datepicker仅选择年月，并设置startDate和endDate后，用户无法正常访问时间区间内的最后一年：点击「查看上一年」按钮后，「下一年」按钮会消失，导致无法切回当前年。

使用的配置代码如下：

$("#datepicker").datepicker({
    format: "mm/yyyy",
    startView: "months", 
    minViewMode: "months",
    multidate: true,
    multidateSeparator: ", ",
    startDate: new Date(2020, 0, 1),
    endDate: new Date(),
});

现象截图：

• 初始化状态：
• 切换至上年后状态：

问题原因 #

当endDate设为当前日期（比如new Date()返回当天日期）时，Bootstrap Datepicker在年月视图下会判定整个当前年存在超出范围的日期（比如当前日期是5月20日，6-12月的日期都晚于endDate），因此直接禁用当前年的导航权限，导致切到上一年后无法返回。

解决方案 #

将endDate设置为当前年的最后一天，让组件认为整个当前年都在允许的时间范围内：

$("#datepicker").datepicker({
    format: "mm/yyyy",
    startView: "months", 
    minViewMode: "months",
    multidate: true,
    multidateSeparator: ", ",
    startDate: new Date(2020, 0, 1),
    // 设置为当前年的12月31日
    endDate: new Date(new Date().getFullYear(), 11, 31),
});

也可以拆分变量提升可读性：

const currentYear = new Date().getFullYear();
$("#datepicker").datepicker({
    format: "mm/yyyy",
    startView: "months", 
    minViewMode: "months",
    multidate: true,
    multidateSeparator: ", ",
    startDate: new Date(2020, 0, 1),
    endDate: new Date(currentYear, 11, 31)
});

修改后，组件会允许导航到当前年，「下一年」按钮不会消失，用户可以正常切换并选择年月。

内容的提问来源于stack exchange，提问作者Abdurrahman Sağır