JavaScript根据年月周数计算日期范围

核心逻辑与算法思路

要实现根据“年-月-周”反推具体日期，关键在于确定当月的第一天是星期几，以此作为计算的锚点。

1. 确定基准日：获取所选年月1号的具体日期对象，并通过 getDay() 方法获取当天是星期几（0代表周日，6代表周六）。
2. 计算当周周一：根据1号是星期几，倒推或顺推计算出当月第一个周一的日期。如果1号是周日(0)，周一需向前推6天；如果1号是周一(1)，即当天；以此类推。
3. 推算目标周：选定某个月份的第 N 周后，从该月第一个周一的日期开始，加上 (N-1) * 7 天，即可得到第 N 周的起始日（周一）。
4. 计算结束日：在起始日的基础上加6天，即为该周的结束日（周日）。

关键函数实现

为了简化日期操作，我们需要辅助函数来处理日期的加减运算以及格式标准化。

第1步：实现日期加减辅助函数 addDate

此函数用于在指定日期基础上增加或减少天数，返回新的 Date 对象。注意这里需要正确处理月份进位和跨年情况，JS的 setDate() 方法能自动处理这些逻辑，但需注意月份索引从0开始，显示时需加1。

// 参数: date - 初始日期字符串(如 '2010/10/01'), days - 要加减的天数
function addDate(date, days) {
    var d = new Date(date);
    d.setDate(d.getDate() + days);
    // 格式化输出 YYYY/MM/DD，注意 getMonth() 返回 0-11
    var m = d.getMonth() + 1;
    var tmpDate = d.getFullYear() + "/" + (m > 9 ? m : "0" + m) + "/" + (d.getDate() > 9 ? d.getDate() : "0" + d.getDate());
    return new Date(tmpDate); 
}

第2步：实现日期格式化函数 changeDateFormat

将内部 Date 对象转换为 YYYY-MM-DD 格式的字符串，便于赋值给输入框或显示。

function changeDateFormat(DateIn) {
    var year = DateIn.getYear();
    var month = DateIn.getMonth() + 1;
    var day = DateIn.getDate();
    // 简单补零处理，实际项目中建议更严谨的判断
    var currentDate = year + "-";
    currentDate += (month > 9 ? month : "0" + month) + "-";
    currentDate += (day > 9 ? day : "0" + day);
    return currentDate;
}

第3步：整合主逻辑 weekToDate

这是核心函数，接收周数、1号对应的星期数值以及日期对象，最终更新页面上的显示元素。

function weekToDate(weekNumber, strWeekDay, dateIn) {
    var outputDate_1; // 当周周一日期
    var outputDate_2; // 目标周周一日期
    
    // 1. 计算当月第一个周一的日期
    // getDay(): 0=Sun, 1=Mon, ..., 6=Sat
    // 如果1号是Sunday(0)，周一是上月最后一天(1号-6)
    // 如果1号是Monday(1)，周一就是1号(1号+0)
    switch(strWeekDay) {
        case '0': outputDate_1 = addDate(dateIn, -6); break;
        case '1': outputDate_1 = addDate(dateIn, 0); break;
        case '2': outputDate_1 = addDate(dateIn, -1); break;
        case '3': outputDate_1 = addDate(dateIn, -2); break;
        case '4': outputDate_1 = addDate(dateIn, -3); break;
        case '5': outputDate_1 = addDate(dateIn, -4); break;
        case '6': outputDate_1 = addDate(dateIn, -5); break;
    }

    // 2. 计算目标周(N周)的周一
    // 第1周的周一即为outputDate_1，后续每周加7天
    var baseMonday;
    if(weekNumber == '1') {
        baseMonday = outputDate_1;
    } else {
        baseMonday = addDate(outputDate_1, (parseInt(weekNumber) - 1) * 7);
    }

    // 3. 获取结果
    var startDate = changeDateFormat(baseMonday);
    var endDate = changeDateFormat(addDate(baseMonday, 6));
    
    // 假设页面上有 id 为 spnDate 和 finishTime 的元素
    document.getElementById("spnDate").value = startDate;
    document.getElementById("finishTime").value = endDate;
}

边界情况与潜在Bug分析

上述基础逻辑在处理大多数月份时有效，但在特定条件下会出现“跨月”导致的逻辑偏差。例如：当某月1日是星期一，且该年是平年（如2010年2月仅有28天）时。

• 2010年2月1日是周一。
• 第1周：2月1日-2月7日
• 第2周：2月8日-2月14日
• 第3周：2月15日-2月21日
• 第4周：2月22日-2月28日
• 第5周：理论上是3月1日-3月7日。

如果业务需求严格限制只能查看当前月份的日期，那么选择“第5周”时，程序会错误地指向下个月。解决此问题的策略通常有两种：

1. 强制截断：在UI层限制下拉菜单，使2月这样的短月最大只显示到第4周。
2. 自动校正：当检测到所选周属于下一个月时，提示用户或自动调整回本月最后一周。

完整调用流程示例

以下是如何从DOM元素中获取用户选择的年、月、周，并触发计算的封装函数。

function getFromToDateOfSelectedWeek() {
    // 1. 获取用户选择的年和月，构造当月1号的时间字符串 'YYYY/MM/01'
    var yearSelect = document.getElementById("sltYear");
    var yearVal = yearSelect.options[yearSelect.selectedIndex].text;
    
    var monthSelect = document.getElementById("sltMonth");
    var monthVal = monthSelect.options[monthSelect.selectedIndex].text;
    
    var firstDayStr = yearVal + "/" + (parseInt(monthVal) > 9 ? monthVal : "0" + monthVal) + "/01";
    var firstDayObj = new Date(firstDayStr);
    
    // 2. 获取1号是星期几 (0-6)
    var weekDayNum = firstDayObj.getDay().toString();
    
    // 3. 获取用户选择的周数
    var weekSelect = document.getElementById("weekNumber");
    var weekVal = weekSelect.options[weekSelect.selectedIndex].text;
    
    // 4. 调用核心计算函数
    weekToDate(weekVal, weekDayNum, firstDayObj);
}

以上就是使用JavaScript实现通过选择周数显示开始日和结束日的详细内容，更多关于JavaScript日期处理的技巧资料请关注本站其它相关文章！