如何不使用startDate和endDate禁用Bootstrap Datepicker中的未来日期

别担心，我之前也遇到过这个困扰！当你的bootstrap-datepicker.js版本不支持startDate和endDate参数时，beforeShowDay回调函数就是最靠谱的解决方案——它允许你逐个控制每个日期的可选择状态。

场景1：只能选择今天（禁用所有过去和未来日期） #

如果你的需求是完全锁定到当前日期，只允许选择今天，代码可以这么写：

$('.your-date-input').datepicker({
    beforeShowDay: function(date) {
        // 重置今天的日期到当天起始时刻（消除时分秒的干扰）
        const today = new Date();
        today.setHours(0, 0, 0, 0);
        
        // 处理当前遍历的日期，同样重置时分秒
        const currentDate = new Date(date);
        currentDate.setHours(0, 0, 0, 0);
        
        // 比较日期是否相等：相等则允许选择，否则禁用
        return [currentDate.getTime() === today.getTime(), ''];
    }
});

代码说明： #

• beforeShowDay会在日历的每个日期单元格渲染前触发，传入当前日期对象。
• 我们把today和currentDate的时分秒都重置为0，避免因为时间部分不同导致日期判断错误。
• 返回的数组第一个元素是布尔值，true表示日期可点击，false表示禁用；第二个元素是可选的CSS类名，用来给日期单元格加样式。

场景2：自定义允许选择的日期范围 #

如果你的需求不是只选今天，而是禁用某个时间点之前的所有日期和某个时间点之后的所有日期（比如允许选择2024年10月1日到2024年10月31日之间的日期），可以调整判断逻辑：

$('.your-date-input').datepicker({
    beforeShowDay: function(date) {
        // 定义允许选择的起始和结束日期（注意月份是0-based，9代表10月）
        const startDate = new Date(2024, 9, 1);
        const endDate = new Date(2024, 9, 31);
        
        // 重置所有日期的时分秒，确保只比较日期部分
        startDate.setHours(0, 0, 0, 0);
        endDate.setHours(0, 0, 0, 0);
        const currentDate = new Date(date);
        currentDate.setHours(0, 0, 0, 0);
        
        // 判断当前日期是否在允许范围内
        const isEnabled = currentDate >= startDate && currentDate <= endDate;
        // 可选：给禁用日期加自定义样式，或者添加悬停提示
        return [isEnabled, isEnabled ? '' : 'disabled-custom', isEnabled ? '' : '该日期不在允许范围内'];
    }
});

额外优化： #

• 如果你需要给禁用的日期添加特殊样式，在返回数组的第二个参数传入自定义CSS类（比如disabled-custom），然后在样式表中定义：

.disabled-custom {
    background-color: #eee;
    color: #999;
    cursor: not-allowed;
}

• 第三个参数是可选的提示文本，鼠标悬停在禁用日期上会显示这个文本。

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