JavaScript实现选择日期后自动计算对应日历周并填充输入框

你现有的HTML结构可以直接复用，补充JavaScript事件监听和通用周数计算逻辑即可实现需求。

现有基础HTML代码 #

<input type="date" name="date" id="date"><br>
<input type="text" name="cw" id="calendarweek">

可选优化：给日历周输入框加readonly属性，避免用户手动修改自动生成的周数

完整JavaScript实现代码 #

/**
 * 计算传入日期对应的ISO标准日历周
 * @param {Date} date 目标日期对象
 * @returns {number} 日历周数
 */
function getCalendarWeek(date) {
  // 复制日期对象，避免计算过程修改原始日期
  const calcDate = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
  // ISO周规则：周一为每周第一天，每年第一个周四所在的周为第1周
  const dayOfWeek = calcDate.getUTCDay() || 7;
  calcDate.setUTCDate(calcDate.getUTCDate() + 4 - dayOfWeek);
  const yearStart = new Date(Date.UTC(calcDate.getUTCFullYear(), 0, 1));
  return Math.ceil((((calcDate - yearStart) / 86400000) + 1) / 7);
}

// 获取DOM元素
const datePicker = document.getElementById('date');
const weekInput = document.getElementById('calendarweek');

// 监听日期选择变化
datePicker.addEventListener('change', () => {
  // 未选择日期时清空周数输入框
  if (!datePicker.value) {
    weekInput.value = '';
    return;
  }
  // 解析选中的日期，计算对应周数
  const selectedDate = new Date(datePicker.value);
  const weekNum = getCalendarWeek(selectedDate);
  // 填充结果，可根据需要调整显示格式，比如只显示数字、加年份等
  weekInput.value = `CW ${weekNum}`;
});

说明 #

• 上述周数计算遵循ISO 8601通用标准，以周一为周起始，每年第一个周四所在周为第1周，适配绝大多数地区的日历周规则。如果需要适配周日为周起始的规则，只需调整getCalendarWeek函数内的偏移计算逻辑即可。
• 代码没有写死当前日期，只要传入用户选中的日期对象就能返回对应周数，解决只能获取当前日期周数的问题。
• 如果日期输入框有默认初始值，可以在页面加载完成后手动触发一次change事件，或者直接调用一次计算逻辑，让周数在页面打开时就自动填充。

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