web-dev-qa-db-ja.com

ngx-bootstrap datepickerは無効な日付を検証します

無効な日付が入力された場合、入力した値を保存または保持して、ユーザーに表示できるようにします。どうすればよいですか？

背景：ngx-bootstrap v5.1.0 datepickerとangular 7.2.15。が無効（例：MM/DD/YYYYを使用して2020年9月99日）の場合、入力フィールドを離れると、「無効な日付」という文字列が入力ボックスに自動的に挿入されます。

この手法は機能しますが、さらに、ユーザーが入力した日付について何らかのフィードバックをユーザーに提供したいと考えています。具体的には、入力した値が無効です。この場合、2020年9月9日になります。

無効な日付の検証を開始することはできますが、最初に入力した日付の値を取得できないため、ユーザーは何を入力したのか、なぜ無効なのかを知ることができます。

enter image description here

フィールドに入力された元の値を取得または保持するにはどうすればよいですか？私はonChangeイベントとvalueChangesを試しましたが、ngx-datepickerはこれをオーバーライドしているように見えるため、フィールドを離れるまで起動しません。

angulardatepickerngx-bootstrap
2
Sandy

ngx-bootstrap-datepickerにはカスタム出力イベントbsValueChangeがあります

HTML input要素に出力を追加します。

  <input type="text"
        class="form-control"
        [minDate]="minDate"
        [maxDate]="maxDate"
        #dp="bsDatepicker"
        (bsValueChange)="onDateChange($event)"
        bsDatepicker [(bsValue)]="myDateValue">

次に、コンポーネントtsでこれを処理します。

 myDateValue: Date;
  previousDate: Date;

  ngOnInit() {
    this.myDateValue = new Date();
  }

  onDateChange(newDate: Date) {
    this.previousDate = new Date(newDate);

Stackblitzの例： https://stackblitz.com/edit/ngx-bootstrap-datepicker-taconz

0
Z. Bagley