如何限制Datepicker仅允许选择未来季度末月份

根据你的需求，我们需要实现两个核心逻辑：

• 仅允许选择季度末月份（3月、6月、9月、12月）
• 禁止选择过去的日期，且仅启用当前时间对应的最近季度末月及之后的季度末月

下面是修改后的完整代码，我会一步步解释关键部分：

$(document).ready(function () {
    // 计算允许选择的最小季度末日期
    function getMinQuarterEndDate() {
        const now = new Date();
        const currentYear = now.getFullYear();
        const currentMonth = now.getMonth(); // 月份是0-based（0=1月，11=12月）
        const quarterEndMonths = [2, 5, 8, 11]; // 对应3、6、9、12月的0-based值

        // 找到第一个大于等于当前月份的季度末月
        let targetMonth = quarterEndMonths.find(month => month >= currentMonth);
        
        // 处理极端跨年度情况（理论上不会触发，仅做兜底）
        let targetYear = currentYear;
        if (!targetMonth) {
            targetMonth = 2;
            targetYear += 1;
        }

        return new Date(targetYear, targetMonth, 1);
    }

    // 判断某个月份是否为季度末月
    function isQuarterEndMonth(date) {
        const month = date.getMonth();
        return [2, 5, 8, 11].includes(month);
    }

    $('.datepickerOne').datepicker({
        format: "yyyy-mm",
        viewMode: "months",
        minViewMode: "months",
        autoclose: true,
        startDate: getMinQuarterEndDate(), // 设置最小可选日期为最近的季度末月
        endDate: '+2y',
        // 禁用所有非季度末的月份
        beforeShowMonth: function(date) {
            return isQuarterEndMonth(date);
        }
    }).on("change", function () {
        $("#testDetailsForm").bootstrapValidator('revalidateField', 'formsubmit_date');
    });
});

关键逻辑解释： #

1. getMinQuarterEndDate函数：

   • 获取当前年份和月份（注意JS中月份是0-based的，1月对应0，12月对应11）
   • 从季度末月份数组中，找到第一个大于等于当前月份的季度末月
   • 返回该季度末月的第一天作为最小可选日期，确保过去的日期无法选择

2. isQuarterEndMonth函数：

   • 检查传入的日期是否属于季度末月份（3、6、9、12月）
   • 在beforeShowMonth回调中使用，直接禁用所有非季度末的月份，用户只能看到可选择的选项

3. Datepicker配置调整：

   • 通过startDate限制用户不能选择早于最近季度末月的日期
   • 通过beforeShowMonth过滤掉所有非季度末的月份，完美匹配你需要的选择规则

测试场景验证： #

• 当前为1月：最小日期为3月，仅3、6、9、12月可选择
• 当前为3月：最小日期为3月，仅3、6、9、12月可选择
• 当前为4月：最小日期为6月，仅6、9、12月及之后的季度末月可选择

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