如何让Datepicker以周日为一周起始并正确显示周数

问题原因 #

jQuery UI Datepicker默认采用ISO 8601标准计算周数：以周一为一周起始，当年第一周需包含至少4天。即便你设置了firstDay: 0（周日为一周起始），周数的计算逻辑仍未改变，导致2023年3月12日（周日）的周数被错误判定为10，而非预期的11。

解决方案 #

通过配置calculateWeek选项，自定义适配周日起始的周数计算逻辑：

修改后的JS代码 #

$(document).ready(function() {
  $('.date-picker').datepicker({
    showWeek: true,
    firstDay: 0,
    changeMonth: true,
    changeYear: true,
    showButtonPanel: false,
    dateFormat: 'dd/mm/yy',
    autoclose: true,
    // 自定义周数计算函数，适配周日为一周起始
    calculateWeek: function(date) {
      var target = new Date(date.valueOf());
      // 本周日的日期（当前周的结束节点）
      var weekEnd = new Date(target.getFullYear(), target.getMonth(), target.getDate() - target.getDay());
      // 当年1月1日的日期
      var startOfYear = new Date(target.getFullYear(), 0, 1);
      // 当年第一个周日的日期
      var firstWeekEnd = new Date(startOfYear.getFullYear(), startOfYear.getMonth(), startOfYear.getDate() - startOfYear.getDay() + 7);
      
      // 如果当前日期在当年第一个周日之前，归属为上一年的最后一周
      if (target < firstWeekEnd) {
        return this.iso8601Week(new Date(target.getFullYear() - 1, 11, 31));
      } else {
        // 计算当前周日与当年第一个周日的间隔周数 +1
        var daysDiff = (weekEnd - firstWeekEnd) / (1000 * 60 * 60 * 24);
        return Math.floor(daysDiff / 7) + 1;
      }
    }
  });
});

逻辑说明 #

• 以周日作为一周的结束节点（对应你设置的周日为起始，即周日到下周六为完整一周）
• 当年第一周定义为包含第一个周日的那一周
• 若日期在当年第一个周日之前，归属为上一年的最后一周
• 测试2023年3月12日时，该日期会被计算为第11周，符合你的预期

HTML代码保持不变 #

<input name="sel-date" id="sel-date" class="date-picker" value="<?= $week_start ?>">

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