如何用JavaScript按规则自动填充起止日期字段？

需求描述 #

需要实现起始日期（分年份、月份两个输入框）到结束日期的自动计算，规则如下：

• 若起始月份为01，则结束月份为12，结束年份与起始年份相同；
• 若起始月份不为01，则结束月份为起始月份减1，结束年份为起始年份加1。

示例：

• 起始日期：2012/01 → 结束日期：2012/12
• 起始日期：2012/02 → 结束日期：2013/01

原代码运行后，结束年份无法正确填充：

<script defer>
    $(document).ready(function () {
        $("#datatable_years").DataTable();
        $("#start_month_year").on('change',function (){
            var year = $(this).val().trim()
            var month = $("#start_month_month").val().trim()
            if (year.length == 4){
                if (!isNaN(year)){
                    $("#end_month_year").val(function(){
                        if(month== 0o1){
                            $("#end_month_year").val(parseInt(year))
                        }else{
                            $("#end_month_year").val(parseInt(year)+1)
                        } 
                    })
                }
            }
        })
        $("#start_month_month").on('change',function (){
            var month = $(this).val().trim()
            if (month.length == 2){
                if (!isNaN(month)){
                    if(month== 01){
                        $("#end_month_month").val(12)
                        $("#end_month_year").val(parseInt(year))
                    }else{
                        $("#end_month_month").val(month)
                        $("#end_month_year").val(parseInt(year)+1)
                    }
                }
            }
        })
    });
</script>

代码问题分析 #

1. 类型不匹配与八进制错误：原代码用month== 0o1（八进制1）和输入的字符串"01"比较，永远不成立，导致逻辑分支错误。
2. 变量未定义：在月份选择框的change事件中，直接使用未声明的year变量，触发ReferenceError，年份赋值逻辑完全失效。
3. 赋值逻辑冗余：给结束年份赋值时嵌套使用val(function(){})，内部又直接调用val()，逻辑混乱。
4. 结束月份计算错误：非1月的情况下，原代码直接把起始月份赋值给结束月份，不符合“起始月份减1”的规则。

修正后的代码 #

<script defer>
$(document).ready(function () {
    $("#datatable_years").DataTable();
    
    // 封装计算结束日期的通用函数，避免重复逻辑
    function calculateEndDate() {
        const yearStr = $("#start_month_year").val().trim();
        const monthStr = $("#start_month_month").val().trim();
        
        // 校验年份格式：4位数字
        if (yearStr.length !== 4 || isNaN(yearStr)) return;
        // 校验月份格式：2位数字
        if (monthStr.length !== 2 || isNaN(monthStr)) return;
        
        const year = parseInt(yearStr, 10);
        const month = parseInt(monthStr, 10);
        let endYear, endMonth;
        
        if (month === 1) {
            endYear = year;
            endMonth = 12;
        } else {
            endYear = year + 1;
            endMonth = month - 1;
        }
        
        // 确保月份是2位字符串（比如1转成"01"）
        $("#end_month_year").val(endYear);
        $("#end_month_month").val(endMonth.toString().padStart(2, '0'));
    }
    
    // 给年份和月份输入框绑定change事件，触发计算
    $("#start_month_year, #start_month_month").on('change', calculateEndDate);
});
</script>

改进说明 #

• 把重复的计算逻辑封装成通用函数calculateEndDate，减少冗余，便于维护。
• 统一使用数字类型进行月份判断，避免字符串与八进制的类型不匹配问题。
• 修复了year变量未定义的问题，每次计算都重新获取最新的年份值。
• 用padStart(2, '0')确保结束月份始终是2位格式（比如1转成"01"），符合示例要求。
• 同时给年份和月份输入框绑定事件，无论修改哪一个都能自动计算结束日期。

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