ngx-bootstrap datepicker 验证无效日期

Question

When an invalid date is entered, I want to save or keep the value entered so I can display it to the user. How do I do this?

Background : I'm using the ngx-bootstrap v5.1.0 datepicker and angular 7.2.15. When a date is invalid (ex:09/99/2020 using MM/DD/YYYY), it automatically puts the string "Invalid date" into the input box when I leave the input field.

This technique works but additionally, I'd like to give the user some sort of feedback about the date that they entered. Specifically, the value entered is invalid. In this case, it would be 09/99/2020.

I can get the invalid date validation to fire, but I can't get the value of the date originally entered so the user knows what they entered and why it's invalid.

How do I get or keep the original value entered into the field? I've tried an onChange event and valueChanges but the ngx-datepicker seems to override this so it doesn't fire until you leave the field.

Answer 1

ngx-bootstrap-datepicker has a custom Output event bsValueChange

Add the output to your HTML input element:

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

and then handle this in your component ts:

 myDateValue: Date;
  previousDate: Date;

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

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

Example stackblitz: https://stackblitz.com/edit/ngx-bootstrap-datepicker-taconz