如何阻止用戶在以角度輸入的日期類型中輸入將來的日期

Question

我已限制用戶將來使用html 5日期選擇器在輸入中輸入日期。 但是用戶可以輸入將來的日期。 如果用戶不選擇從日期選擇器日歷中選擇日期值，是否可以阻止用戶輸入將來的日期？

這是我的代碼：

的HTML

  <div class="col-sm-7">

    <input type="date" class="form-control" [max]="maxDate" pattern="^(19[5-9][0-9]|20[0-4][0-9]|2050)[-/](0?[1-9]|1[0-2])[-/](0?[1-9]|[12][0-9]|3[01])$" name="Datebillabuse" [(ngModel)]="Datebillabuse" #date="ngModel" [ngClass]="{ 'is-invalid': f.submitted && date.invalid }" required />
    <div *ngIf="f.submitted && date.invalid" class="invalid-feedback">
        <div *ngIf="date.errors.required">Date is required</div>
        <div *ngIf="date.errors.pattern">Please enter a valid date</div>
        <div *ngIf='date.errors.max'>Date must not be in future</div>
    </div>
  </div>

打字稿

  setTodayDate() {

    const dtToday = new Date();
    let month = String(dtToday.getMonth() + 1);
    let day = String(dtToday.getDate());
    let year = dtToday.getFullYear();


    if (parseInt(month, 10) < 10) {
        month = '0' + month.toString();
    }
    if (parseInt(day, 10) < 10) {
        day = '0' + day.toString();
    }

     this.maxDate = `${year}-${month}-${day}`;

  }

我想到的一種解決方案是檢查日期值是否大於今天並顯示錯誤。

有沒有更好的方法來解決這個問題？

Answer 1

當我們通過設置maximum屬性限制用戶時，html input type date元素存在問題，因為這不允許用戶從日歷下拉列表中選擇日期，但用戶仍然可以使用鍵盤鍵入不需要的值。 所以這是hack，我已經習慣了解決這個問題

1. 聲明一個布爾值以檢查日期是否無效。

   futureDateError：布爾值;

2. 聲明一種檢查輸入日期是否有效的方法。

   checkDateValidity（date：string）：布爾{

     const mxDate = new Date(this.maxDate); const inputDate = new Date(date); if (inputDate > mxDate) { return this.futureDateError = true; } return this.futureDateError = false; 

   }

3. 將此方法與(change)事件綁定。

4. 當日期無效且不提交表單時顯示錯誤。

   日期不能在將來

   如果（this.checkDateValidity（this.Datebillabuse））{返回； }