时间戳

首页 > 解决方案 > 在 Angular 应用程序中没有获得正确日期值的周数

angular - 在 Angular 应用程序中没有获得正确日期值的周数

问题描述

我正在制作一个规划器项目，我使用 datefns 库。我有一个函数给出一年中的周数。问题是，只要我单击选定的星期（下拉菜单），它就没有给出正确的日期。我想显示所选周的第一天和最后一天。现在我只能显示第一天。如何显示所选周的正确日期和所选周的最后一天？

这是我的 ts 代码：

export class AppComponent implements OnInit {
  selectedWeek! : Date;
  weeks!: any[];
  display = false;
  date =  new Date(); //null

 constructor() {}

  ngOnInit(): void {
    this.selectedWeek = new Date();
    this.weeks = this.getWeeks();
  }
  getWeeks() {
    const startDate = new Date(new Date().getFullYear(), 0, 1); // first day of the year
    console.log(startDate);

    const endDate = new Date(new Date().getFullYear(), 11, 31); // last day of the year
    console.log(endDate);

    // How many full weeks are between end date & start date
    var result = [];
    const count = differenceInWeeks(endDate, startDate);
    result = Array.from({ length: count }, (_, i) => `Week ${i + 1}`);

    console.log('array of weeks', count);
    return result;
  }

  changeWeek(week: Date) {
    let date = week;
    this.selectedWeek = date;
    this.weeks = this.getWeeks();
    this.display = true;
  }
}

还有我的模板代码

<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">{{ selectedWeek }}</span>
        </div>
        <ul
          class="dropdown-menu"
          ngbDropdownMenu
          aria-labelledby="navbarScrollingDropdown"
        >
          <li
            ngbDropdownItem
            *ngFor="let week of weeks"
            class="dropdown-item"
            (click)="changeWeek(week)"
          >
             <div>{{ week }}</div>
           </li>
        </ul>
      </div>
    
    </div>
      <div class="plannerBottom">
        <p>
          From <b>{{ selectedWeek | date: 'd MMMM yyyy' }}</b> to
          <b>{{ selectedWeek | date: 'd MMMM yyyy' }}</b>
        </p>
      </div>
    </div>

这是我的工作演示StackBlitz。

标签： angulardate-fns

解决方案

正如您所解释的，我已经进行了更改以使其工作，我已经分叉了您的 StackBlitz 项目，因此您可以在此处查看更新版本。

关键变化是订单项的点击事件以及周列表的生成方式。生成的列表使用对象数组（具有日期和标签）。

将选定的日期移动到它自己的状态并添加一个单独的函数来处理日期信息的填充（一周的开始和结束）允许更轻松地生成周列表的逻辑和一次性操作。

推荐阅读