jQuery周选择器设firstDay为周一后，周日选中错误周的问题

我来帮你搞定这个困扰了你许久的问题！当把jQuery UI Datepicker改成周选择器，并且设置firstDay: 1（周一作为一周首日）时，点击周日会错误选中下一周，这个问题其实是组件默认的周计算逻辑导致的——它会把周日归为下一周的第一天，哪怕你设置了周一为起始日。下面是具体的分析和解决方案：

问题根源 #

jQuery UI Datepicker的默认周计算逻辑里，当firstDay设为1时，仍然会将周日划到下一周的范畴。所以当你点击周日时，组件会自动选中该日期所属的“下一周”，但视觉上还是高亮当前显示的周日，就出现了视觉和实际选中值不一致的矛盾情况。

具体解决方案 #

我们需要重写周选择的逻辑，强制让周日归到当前周一所在的周。可以通过自定义周计算函数和修改onSelect事件来实现：

1. 自定义周范围计算函数 #

这个函数会根据传入的日期，返回以周一为起始的周的开始（周一）和结束（周日）日期，确保周日被归到上一个周一的周：

function getWeekRange(date) {
  const dayOfWeek = date.getDay();
  // 计算周一：如果是周日，减6天；其他情况减(当前星期数-1)天
  const weekStart = new Date(date);
  weekStart.setDate(date.getDate() - (dayOfWeek === 0 ? 6 : dayOfWeek - 1));
  
  // 计算周日：周一加6天
  const weekEnd = new Date(weekStart);
  weekEnd.setDate(weekStart.getDate() + 6);
  
  return { start: weekStart, end: weekEnd };
}

2. 修改Datepicker配置 #

在初始化配置里，我们覆盖默认的onSelect行为，用自定义函数来确定选中的周，同时修正组件内部的选中状态：

$('.week-picker').datepicker({
  firstDay: 1,
  showWeek: true,
  showOtherMonths: true,
  selectOtherMonths: true,
  onSelect: function(dateText, inst) {
    const selectedDate = new Date(dateText);
    const { start, end } = getWeekRange(selectedDate);
    
    // 按你需要的格式格式化日期，这里用yy-mm-dd示例
    const formattedStart = $.datepicker.formatDate('yy-mm-dd', start);
    const formattedEnd = $.datepicker.formatDate('yy-mm-dd', end);
    
    // 更新输入框显示的周范围
    $(this).val(`${formattedStart} - ${formattedEnd}`);
    
    // 手动修正Datepicker内部的选中日期为周起始（周一），避免后续状态混乱
    inst.selectedDay = start.getDate();
    inst.selectedMonth = start.getMonth();
    inst.selectedYear = start.getFullYear();
  },
  beforeShowDay: function(date) {
    // 可选：保持选中周的高亮效果，让视觉反馈更准确
    const inputValue = $('.week-picker').val();
    if (inputValue) {
      const [startStr] = inputValue.split(' - ');
      const weekStart = getWeekRange(new Date(startStr)).start;
      const weekEnd = getWeekRange(new Date(startStr)).end;
      
      if (date >= weekStart && date <= weekEnd) {
        return [true, 'ui-state-highlight', ''];
      }
    }
    return [true, '', ''];
  }
});

效果验证 #

现在点击周日时，输入框会显示该周日所属的周一到周日的完整周范围，而不是错误的下一周，同时整个周会正确高亮，视觉和实际选中的周终于一致了！

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