Как определить окончательное событие ValueChange в Kendo Angular DatePicker

Question

Мне нужно установить минимальную и максимальную даты для Kendo Angular DatePicker. Это довольно просто, используя [(max)]="maxDate" and [(min)]="minDate" и это работает при использовании мыши и щелчка по DatePicker.

Проблема заключается в том, что при использовании ввода с клавиатуры пользователь может выбирать даты вне минимальных и максимальных дат. У меня есть событие valueChange, но оно срабатывает при каждом нажатии клавиши. Я не могу определить, когда пользователь заканчивает ввод всей даты, а затем просто устанавливает дату на минимум или максимум по мере необходимости. Я мог бы установить событие onFocus для следующего элемента управления, но это было бы глупо.

Это фрагмент HTML-кода:

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

Угловой код такой:

 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);


    }

Полный пример плунжера здесь: Пример плунжера

Answer 1

Хорошо, так как мой комментарий на самом деле точечный, так что вместо того, чтобы использовать событие onchange, мы должны использовать событие on blur

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

и просто немного изменить функцию onFirstPaymentDateChange, так как мы не получаем значение даты, может просто получить его с this.firstPaymentDate и мы можем продолжать устанавливать логику (максимальное значение). Вот рабочий пример в PLNKR