How do I determine final ValueChange event on Kendo Angular DatePicker

I need to set min and max dates for a Kendo Angular DatePicker. This is pretty straight forward using [(max)]="maxDate" and [(min)]="minDate" and this works when using a mouse and clicking the DatePicker.

The problem is when using keyboard entry a user can select dates outside the min and max dates. I have a valueChange event but it fires with every keystroke. I cannot determine when the user is finished entering the entire date and then simply setting the date to min or max as needed. I could set an onFocus event for the next control but that would be kludgy.

This is a snippet of the html code:

  <kendo-datepicker 
    id="dpFirstPaymentDate" 
    (valueChange)="onFirstPaymentDateChange($event)" 
    [(value)]="firstPaymentDate" 
    [(max)]="maxDate" 
    [(min)]="minDate" 
    [(focusedDate)]="firstPaymentDate" 
    [rangeValidation] = "true" 
    title="First Payment Date">
  </kendo-datepicker>

The angular code is this:

 protected onFirstPaymentDateChange(/*event: EventEmitter*/ value: Date): void {

        if (value > this.maxDate) {
          // This does not appear to be working
          value = new Date(this.maxDate);
          this.firstPaymentDate = new Date(this.maxDate);
        }
        else if (value < this.minDate) {
          value = new Date(this.minDate);
          this.firstPaymentDate = new Date(this.minDate);
        }

        this.maturityDate = new Date(value);
        this.maturityDate.setMonth(value.getMonth() + this.term);


    }

A complete plunker example is here: Plunker example

Solution

Okay since my comment is actually on point, so actually instead of using onchange event we should use the on blur event

<kendo-datepicker 
    id="dpFirstPaymentDate" 
    (blur)="onFirstPaymentDateChange($event)" 
    [(value)]="firstPaymentDate" 
    [(max)]="maxDate" 
    [(min)]="minDate" 
    [(focusedDate)]="firstPaymentDate" 
    [rangeValidation] = "true" 
    title="First Payment Date">
</kendo-datepicker>

and just a bit change on the onFirstPaymentDateChange function, since we are not getting the date value, might just get it with this.firstPaymentDate and we can continue to set the logic (max value). Here's working example in plnkr