How to disable future weeks based on year Angular 8

Question

I have year and weeks dropdown in UI, Based on selected year i am displaying the list of weeks in week dropdown

Now i want to disable future weeks

For Ex - Year 2022, Weeks dropdown showing list of values like 1,2,3,4,.....53 weeks are displaying But i want user can only able to select weeks till current date of February.

Expected output - User can not able to select future weeks or function will display only current weeks numbers not future weeks.

Below is my code which is calculating weeks based on year.

Can anyone please help me to disable future weeks based on my logic.

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

I would suggest the next steps:

1. Create a function getWeekNumberByDate
2. Get last week number by year number (year is selected in dropdown)
3. Generate an array of week options
4. Get current week number
5. Set condition disabled=currentWeekNumber<= item

Let's code it.

UPDATED due to comments

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