As a user of this Angular 7 application, you are required to choose a date from a calendar input and then determine what day it was 40 days ago. Unfortunately, I have not been able to accomplish this in Typescript yet. There are numerous JavaScript solutions available, but I am struggling to convert them into an Angular-compatible typescript version. Currently, I have two functions attempting to achieve this (Generate 1 & Generate 2) both without success.
Generate 1 is supposed to utilize the 'add-subtract-date' library I imported via npm, but I keep encountering the Typescript error... "error TS2580: Cannot find name 'require'."
Generate 2 does not throw any errors but also fails to perform the desired action. Moreover, I suspect there might be issues with my HTML implementation as well. Any fresh ideas on how to tackle this issue would be greatly appreciated, just remember to include modifications to the HTML as part of your solution.
component.ts...
import { Component, EventEmitter, Input, Output, OnInit } from '@angular/core';
import { CalculatorService } from '../calculator.service';
import { add, subtract } from 'add-subtract-date';
import { NgForm } from '@angular/forms';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
lastWorkingDay: any;
isWeekday: string;
public fortyDaysDate: any;
private _retireSet: Date;
get retireSet(): Date {
return this._retireSet;
}
set retireSet(value: Date) {
this._retireSet = value;
}
constructor(private calculatorService: CalculatorService) {
}
ngOnInit() {
}
//Generate 1, this worked when using "const d: Date = new Date()"
public daysForty(): any {
const d: Date = this.retireSet;
const fortyDaysBack = subtract(d, 40, "days");
this.fortyDaysDate = fortyDaysBack;
}
// Generate 2, this does not work
protected generateLastWorkingDay(): Date {
const lastWorkingDay = new Date(Date.now());
while(!this.isWorkingDay(lastWorkingDay)) {
lastWorkingDay.setDate(lastWorkingDay.getDate()-40);
}
return lastWorkingDay;
}
private isWorkingDay(date: Date) {
const day = date.getDay();
const isWeekday = (day > 0 && day < 6);
return isWeekday;
}
}
component.html...
<form>
<div class="container">
<div class="form-group">
<label for="retireSet">Set Date</label>
<input type="datetime-local" id="retireSet"
name="RetireCalculatorSetDate" value="retireSet" ngModel
#RetireCalculatorSetDate="ngModel" [(ngModel)]="retireSet" class="form-control" />
</div>
<div class="form-group">
<label for="staffID">Staff ID</label>
<input type="text" id="staffID" name="RetireCalculatorStaffID"
[(ngModel)]="RetireCalculatorStaffID"
class="form-control" />
</div>
<div>
<button type="button" class="btn btn-success"
(click)="daysForty()">Generate 1</button>
<input type="text" name="RetireCalculatorDay45" value="fortyDaysDate" ngModel #RetireCalculatorDay45="ngModel"
[(ngModel)]="fortyDaysDate" class="form-control" />
</div>
<div>
<button type="button" class="btn btn-success" (click)="generateLastWorkingDay()"> Generate 2 </button>
<input type="date" class="text-field w-input" name="LastWorkingDay"
value="LastWorkingDay" [(ngModel)]="LastWorkingDay" />
</div>
<button type="button" class="btn btn-success" (click)="sendForm($event)">Submit</button>
</div>
</form>