如何根据年份 Angular 8 禁用未来几周

Question

我在 UI 中有年和周下拉列表，基于 select 年，我在周下拉列表中显示周列表

现在我想禁用未来几周

前 - 2022 年， 显示 1、2、3、4、......53 周等值列表的周数下拉列表正在显示但我希望用户只能 select 周到二月的当前日期。

预期输出 - 用户无法 select 未来几周或函数将仅显示当前周数而不显示未来周数。

下面是我的代码，它根据年份计算周数。

任何人都可以根据我的逻辑帮助我禁用未来几周。

week(y = 0) {
    y = y ? y : new Date().getFullYear();
    let d, isLeap;
    d = new Date(y, 0, 1);
    isLeap = new Date(y, 1, 29).getMonth() === 1;
    let count = d.getDay() === 4 || isLeap && d.getDay() === 3 ? 53 : 52;
    this.numbers = Array(count).fill(0).map((x, i) => i + 1);
  }

Answer 1

我建议接下来的步骤：

创建函数getWeekNumberByDate
按年份获取上周的数字（年份在下拉列表中选择）
生成一周选项数组
获取当前周数
设置条件 disabled=currentWeekNumber<= item

让我们编码吧。

因评论而更新

app.component.ts

import { Component } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  public form: FormGroup = new FormGroup({
    year: new FormControl(''),
    week: new FormControl(''),
  });

  public yearOptions = this.getYearOptions();
  public weekOptions = [];
  public currentWeekNumber: number = this.getWeekNumberByDate(new Date());
  public currentYear = new Date().getFullYear();

  onSelectYear() {
    const selectedYear = this.form.value.year;
    this.weekOptions = this.getWeekOptions(selectedYear);
  }

  private getYearOptions() {
    const years = [];
    const fromYear = 2021;
    const toYear = new Date().getFullYear() + 2;

    for (let i = fromYear; i <= toYear; i++) {
      years.push(i);
    }
    return years;
  }

  private getWeekOptions(year: number) {
    const date = new Date();
    date.setFullYear(year);

    const lastDayInYear = new Date(new Date().getFullYear(), 11, 31);
    const lastWeekNumberInYear = this.getWeekNumberByDate(lastDayInYear);

    return Array(lastWeekNumberInYear)
      .fill(0)
      .map((x, i) => ({ weekNumber: i + 1, year: year }));
  }

  /*
   Function source here: 
   
  */
  private getWeekNumberByDate(d) {
    d = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()));
    d.setUTCDate(d.getUTCDate() + 4 - (d.getUTCDay() || 7));
    const yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
    const weekNo = Math.ceil(((+d - +yearStart) / 86400000 + 1) / 7);
    return weekNo;
  }
}

app.component.html

<form [formGroup]="form">
  <div class="col-md-3">
    <mat-select
      class="smed-input"
      formControlName="year"
      placeholder="Select SMED Year*"
      (selectionChange)="onSelectYear()"
    >
      <mat-option *ngFor="let year of yearOptions" [value]="year">
        {{ year }}
      </mat-option>
    </mat-select>
  </div>
  <div class="col-md-3">
    <mat-select
      formControlName="week"
      class="smed-input"
      placeholder="Select Week*"
    >
      <mat-option
        *ngFor="let item of weekOptions"
        [value]="item.weekNumber"
        [disabled]="
          currentYear < item.year ||
          (currentYear === item.year && currentWeekNumber < item.weekNumber)
        "
        placeholder="Week Number*"
      >
        {{ item.weekNumber }}
      </mat-option>
    </mat-select>
  </div>
</form>

Link 对于 stackblitz

更新 link stackblitz

如何根据年份 Angular 8 禁用未来几周

How to disable future weeks based on year Angular 8

javascript

date

typescript

angular

angular8