Question

在此Angular 7应用中，用户需要从日历输入中选择一个日期，然后生成40天之前的日期。我无法在Typescript中弄清楚这一点。有很多JavaScript解决方案，但是我不知道如何将它们转换为Angular友好的打字稿版本。现在，我有两个函数都试图做到这一点（Generate 1＆Generate 2），但都没有起作用。

生成1 应该使用我导入的（npm）“加减日期”，但是我收到Typescript错误...“错误TS2580：找不到名称'require '。”

Generate 2 没有错误，什么也不做。
我也不认为我的HTML是正确的。我愿意接受任何新想法，也请包括HTML。

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>

Answer 1

您使用的导入不正确。请记住，您要导入的功能不是对象。

import { add, subtract } from 'add-subtract-date';
...

//Generate 1
public daysForty(): Date {
  const d: Date = new Date();
  const fortyDaysBack = subtract(d, 40, "days"); // Check this. does subtract() manipulate "d" or create a new date?
  return fortyDaysBack;
}

您的第二个功能有些混乱。函数名称指示它将生成LastWorkingDay。但是，逻辑与while循环混淆。

角度7，从日期输入中减去日历天

1 个答案: