title: How do I determine final ValueChange event on Kendo Angular DatePicker
body: <p>I need to set min and max dates for a Kendo Angular DatePicker.  This is pretty straight forward using <code>[(max)]="maxDate" and [(min)]="minDate"</code> and this works when using a mouse and clicking the DatePicker.</p>
  
  <p>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.</p>
  
  <p>This is a snippet of the html code:</p>
  
  <pre><code>  &lt;kendo-datepicker 
      id="dpFirstPaymentDate" 
      (valueChange)="onFirstPaymentDateChange($event)" 
      [(value)]="firstPaymentDate" 
      [(max)]="maxDate" 
      [(min)]="minDate" 
      [(focusedDate)]="firstPaymentDate" 
      [rangeValidation] = "true" 
      title="First Payment Date"&gt;
    &lt;/kendo-datepicker&gt;
  </code></pre>
  
  <p>The angular code is this:</p>
  
  <pre><code> protected onFirstPaymentDateChange(/*event: EventEmitter*/ value: Date): void {
  
          if (value &gt; this.maxDate) {
            // This does not appear to be working
            value = new Date(this.maxDate);
            this.firstPaymentDate = new Date(this.maxDate);
          }
          else if (value &lt; 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);
  
  
      }
  </code></pre>
  
  <p>A complete plunker example is here: <a href="http://plnkr.co/edit/1IZO9BGKDinHPAW58Ogr" rel="nofollow noreferrer">Plunker example</a></p>