Bootstrap Date Picker特定月份禁用：仅允许选4-10月的技术实现求助

没问题，我之前做项目的时候正好遇到过类似需求，Bootstrap DatePicker可以通过它自带的回调函数轻松搞定。下面是具体的实现方案：

核心实现思路 #

利用beforeShowMonth回调函数，在日历渲染每个月份时判断该月份是否在允许的范围内（4月至10月），返回true则允许选择，返回false则禁用该月份。

注意：JavaScript中Date.getMonth()返回的月份是从0开始索引的（0=1月，1=2月……9=10月），所以4月对应索引3，10月对应索引9，别搞混了！

代码示例 #

HTML部分 #

<input type="text" id="limited-datepicker" class="form-control" placeholder="选择日期">

JavaScript部分 #

// 初始化日期选择器
$('#limited-datepicker').datepicker({
    format: 'yyyy-mm-dd', // 根据你的需求调整日期格式
    beforeShowMonth: function(date) {
        const currentMonth = date.getMonth();
        // 仅允许4月(索引3)到10月(索引9)的月份
        return currentMonth >= 3 && currentMonth <= 9;
    },
    // 可选：设置默认显示的月份为当前年份的4月，避免打开日历默认显示禁用月份
    defaultViewDate: {
        month: 3,
        year: new Date().getFullYear()
    },
    autoclose: true // 可选：选择日期后自动关闭日历，提升体验
});

额外说明 #

• 这个方案会对所有年份的4-10月生效，不管是过去还是未来的年份，完全符合你的需求。
• 如果需要对特定年份做额外限制，可以在beforeShowMonth回调里加入年份判断逻辑，比如date.getFullYear() === 2024。
• 测试时注意点击禁用的月份（比如1月、2月），这些月份会变成灰色无法选择，只有4-10月可以正常点击并选择日期。

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