Angular应用使用datefns时周数对应起止日期显示异常咨询

问题核心原因 #

1. 你当前下拉列表生成的是Week X格式的字符串，changeWeek方法接收的参数实际是字符串而非Date类型，错误的类型声明导致无法拿到正确的日期计算基准
2. 缺少基于选中周数计算当周起止日期的逻辑，模板里起止时间都绑定了同一个selectedWeek变量，自然会显示相同内容

修复方案 #

首先确保你已经导入date-fns需要的工具函数：

import { differenceInWeeks, startOfWeek, endOfWeek, addWeeks } from 'date-fns';

TS代码修改

export class AppComponent implements OnInit {
  // 新增变量存储选中周的起止日期
  weekStart!: Date;
  weekEnd!: Date;
  selectedWeekNum!: number;
  // 调整weeks数组结构，存储周数对应的计算基准信息
  weeks!: { weekNum: number; label: string; baseDate: Date }[];
  display = false;
  date = new Date();
  currentYear = new Date().getFullYear();

  constructor() {}

  ngOnInit(): void {
    // 初始化默认选中当前周
    this.selectedWeekNum = +new Intl.DateTimeFormat('zh-CN', { week: 'numeric' }).format(this.date);
    this.weeks = this.getWeeks();
    this.calculateWeekRange(this.selectedWeekNum);
  }

  getWeeks() {
    const yearStart = new Date(this.currentYear, 0, 1);
    const yearEnd = new Date(this.currentYear, 11, 31);
    const weekCount = differenceInWeeks(yearEnd, yearStart) + 1; // 补全最后一周
    return Array.from({ length: weekCount }, (_, i) => {
      const weekNum = i + 1;
      return {
        weekNum,
        label: `Week ${weekNum}`,
        // 预存当年第X周对应的基准日期，避免重复计算
        baseDate: addWeeks(startOfWeek(yearStart), i)
      }
    });
  }

  changeWeek(selectedWeekItem: typeof this.weeks[0]) {
    this.selectedWeekNum = selectedWeekItem.weekNum;
    this.calculateWeekRange(selectedWeekItem.weekNum, selectedWeekItem.baseDate);
    this.display = true;
  }

  // 公共方法：计算指定周的起止日期
  calculateWeekRange(weekNum: number, baseDate?: Date) {
    const targetDate = baseDate ?? addWeeks(startOfWeek(new Date(this.currentYear, 0, 1)), weekNum - 1);
    // 如果周起始为周一，可传入配置项：startOfWeek(targetDate, { weekStartsOn: 1 })
    this.weekStart = startOfWeek(targetDate);
    this.weekEnd = endOfWeek(targetDate);
  }
}

模板代码修改

<h2 style="margin: 10px 0px 0px 100px"> Planner</h2>
<div class="plannerHeader" role="row">
  <div class="planner" style="width:160px" >
    <div class="weekOptions" ngbDropdown>
      <div
        class="chevron"
        id="navbarScrollingDropdown"
        ngbDropdownToggle
        data-no-icon="true"
      >
        <span *ngIf="!display">Week {{ date | date: 'w' }}</span>
        <span *ngIf="display">Week {{ selectedWeekNum }}</span>
      </div>
      <ul
        class="dropdown-menu"
        ngbDropdownMenu
        aria-labelledby="navbarScrollingDropdown"
      >
        <li
          ngbDropdownItem
          *ngFor="let weekItem of weeks"
          class="dropdown-item"
          (click)="changeWeek(weekItem)"
        >
          <div>{{ weekItem.label }}</div>
        </li>
      </ul>
    </div>
  </div>
  <div class="plannerBottom">
    <p>
      从 <b>{{ weekStart | date: 'd MMMM yyyy' }}</b> 到
      <b>{{ weekEnd | date: 'd MMMM yyyy' }}</b>
    </p>
  </div>
</div>

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