如何根據Angular8年禁用未來幾周

我在 UI 中有年和周下拉選單，根據選定的年份，我正在顯示周下拉串列中的周串列

現在我想禁用未來幾周

對于 Ex - Year 2022， Weeks 下拉選單顯示 1、2、3、4、.....53 周等值串列，但我希望用戶只能選擇截至 2 月當前日期的周數。

預期輸出 -用戶無法選擇未來幾周，否則函式將僅顯示當前周數而不是未來幾周。

下面是我的代碼，它根據年份計算周數。

任何人都可以根據我的邏輯幫助我禁用未來幾周。

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);
  }


   

uj5u.com熱心網友回復：

我建議接下來的步驟：

1. 創建一個函式getWeekNumberByDate
2. 按年份編號獲取上周編號（在下拉串列中選擇年份）
3. 生成一系列周選項
4. 獲取當前周數
5. 設定條件 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: 
   https://stackoverflow.com/a/6117889/7979902
  */
  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 for stackblitz

Updated link for stackblitz

標籤：javascript 有角度的 打字稿 日期 角8

上一篇：應用程式腳本：我無法正確過濾列中的日期

下一篇：SQLServer-將特定字串日期格式轉換為日期資料型別