如何获取指定月份内任意星期几的对应日期并修复仅支持周一的代码

问题原因 #

你当前代码仅支持查询周一，核心问题有3个：

• 代码内硬编码了星期参数为1（JS中Date.getDay()返回值0代表周日、1代表周一、2代表周二...6代表周六）
• 缺少星期选择的下拉交互组件，没有接收用户选择的星期参数的入口
• 重复定义了两次getAllInstancesOfDayInMonth函数，其中第二次定义里fordate.setDate(2)的逻辑存在错误，会漏掉每月1号刚好是目标星期的情况

修正方案 #

第一步：补充星期选择HTML #

先在页面原有月份下拉的基础上，新增星期选择下拉框：

<!-- 原有月份下拉#ddlMonths保留，新增以下星期选择 -->
<select id="ddlDays">
  <option value="0">周日</option>
  <option value="1">周一</option>
  <option value="2">周二</option>
  <option value="3">周三</option>
  <option value="4">周四</option>
  <option value="5">周五</option>
  <option value="6">周六</option>
</select>
<div id="result"></div>

第二步：修正JS逻辑 #

删除重复的函数定义，替换硬编码的星期参数，同时给两个下拉加事件监听：

// 保留正确的日期计算函数
function getAllInstancesOfDayInMonth(fordate, forday) {
    fordate.setDate(1);
    var start  = getStartDay(fordate, forday)
       ,month  = fordate.getMonth()
       ,result = [start];

    while (fordate.getMonth() == month) {
      result.push(new Date(fordate.setDate(fordate.getDate()+7)));
    } 

    return result.slice(0,-1);

    function getStartDay(d, forday) {
     return d.getDay() != +forday
            ? ( d.setDate( d.getDate() + 1 ), getStartDay(d, forday) )
            : new Date(d);
    }
}
  
(function () {
    // 提前获取两个下拉和结果容器
    const ddlMonths = document.querySelector('#ddlMonths');
    const ddlDays = document.querySelector('#ddlDays');
    const result = document.querySelector('#result');
  
    // 两个下拉的change事件都触发查询
    ddlMonths.addEventListener('change', renderDays);
    ddlDays.addEventListener('change', renderDays);
  
    // 封装统一的查询渲染方法
    function renderDays(){
        const year = ddlMonths.getAttribute('data-year');
        const month = +ddlMonths.options[ddlMonths.selectedIndex].value;
        const monthstr = ddlMonths.options[ddlMonths.selectedIndex].innerHTML;
        // 读取用户选择的星期参数
        const targetDay = +ddlDays.options[ddlDays.selectedIndex].value;
        const dayStr = ddlDays.options[ddlDays.selectedIndex].innerHTML;
        
        result.innerHTML = `<h3>${year}年${monthstr}所有${dayStr}的日期：</h3>`;
        const dateList = getAllInstancesOfDayInMonth(new Date([year,month+1,1].join('/')), targetDay);
        // 格式化日期输出，可根据需求自定义格式
        result.innerHTML += dateList.map(date => date.toLocaleDateString()).join('<br>');
    }
  
    // 页面初始化默认渲染一次
    renderDays();
}())

改动说明 #

• 新增了星期选择下拉，可自由选择周日到周六
• 把原来硬编码的星期参数1替换为动态读取下拉选中值
• 删除了重复的错误函数定义，保留了正确的从每月1号开始遍历的逻辑
• 封装了统一的渲染方法，无论是切换月份还是切换星期都会自动重新查询结果
• 优化了日期输出格式，默认用本地可读的日期格式展示

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