Deactivating upcoming weeks according to the year in Angular 8

Question

Deactivating upcoming weeks according to the year in Angular 8

In the user interface, there are dropdowns for selecting a year and a week. Once a year is selected, the list of weeks for that year is displayed in the week dropdown.

Now, the requirement is to disable the selection of future weeks.

For example, for the year 2022: The weeks dropdown displays values from 1 to 53. However, users should only be able to select weeks up to the current date in February.

Expected output: Users should not be able to select future weeks; only the numbers for the current weeks should be displayed.

Below is the code that calculates the weeks based on the selected year.

Could someone please assist in implementing the logic to disable future weeks?

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

javascript angular typescript date angular8

Answer 1

Answer №1

If you're looking to implement the following functionality, consider these steps:

Start by creating a function called getWeekNumberByDate
Retrieve the last week number based on the selected year in the dropdown
Generate an array of week options
Determine the current week number
Apply a condition to disable options where the currentWeekNumber is less than or equal to the item

Let's proceed with the coding.

UPDATED based on feedback

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

Answer 2

If you're looking to implement the following functionality, consider these steps:

Start by creating a function called getWeekNumberByDate
Retrieve the last week number based on the selected year in the dropdown
Generate an array of week options
Determine the current week number
Apply a condition to disable options where the currentWeekNumber is less than or equal to the item

Let's proceed with the coding.

UPDATED based on feedback

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

Deactivating upcoming weeks according to the year in Angular 8

Answer №1

Similar questions

Leveraging ternary operators within HTML elements

Having issues with validating a form using Yup for a Checkbox input?

What steps should I take to create code that can generate a JWT token for user authentication and authorization?

Leveraging CSS nth-child selector in conjunction with ngFor in angular2

Is your form complete?

Challenges encountered with input outcomes

Automatically align a Div to the right within an ngFor directive in an Angular 6 application

Retrieving data from a <span> element within a webpage created using ReactJS

The ".splice()" method continuously removes the final element from an array

I want to know the most effective way to showcase particular information on a separate page using Angular

Issue with Vue.js: document.querySelector is returning a null value even though the element clearly exists

Is there a way to enable data-add-back-btn using jQuery script?

After generating the token, where is the appropriate place to define the authorization header?

Updating a value in one input field triggers changes in several other input fields in Angular 6

Is it possible to generate multiple services from a single factory in Angular?

"Unlocking the potential: Exploring the power of keyof with

The data from Angular2 Observable Subscription appears undefined, although a closer look at the Browser Debug reveals otherwise

Setting up a chat feature in a Laravel application: A step-by-step guide

In Production mode, Angular automatically reloads the page every time my data request service is executed to fetch data from the API

An error occurred with the authorization headers when attempting to retrieve the requested JSON