亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何阻止用戶在 angular 的日期類型輸入中輸入未來日期

如何阻止用戶在 angular 的日期類型輸入中輸入未來日期

喵喔喔 2021-10-21 14:06:56
我已限制用戶將來使用 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}`;  }我想到的一種解決方案是檢查日期值是否大于今天并顯示錯誤。有沒有更好的方法可以在 Angular 中解決它?
查看完整描述

1 回答

?
梵蒂岡之花

TA貢獻1900條經驗 獲得超5個贊

當我們通過設置最大屬性來限制用戶時,html 輸入類型日期元素存在問題,因為這不允許用戶從日歷下拉列表中選擇日期,但用戶仍然可以使用鍵盤輸入不需要的值。所以這就是 hack,我曾經處理過這個問題


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


未來日期錯誤:布爾值;


聲明一個方法來檢查輸入日期是否有效。


checkDateValidity(日期:字符串):布爾{


    const mxDate = new Date(this.maxDate);

    const inputDate = new Date(date);


    if (inputDate > mxDate) {

      return this.futureDateError = true;

    }

    return this.futureDateError = false;

}


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


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


日期不能在未來

如果 (this.checkDateValidity(this.Datebillabuse)) { return; }


查看完整回答
反對 回復 2021-10-21
  • 1 回答
  • 0 關注
  • 163 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號